La etiqueta CANVAS (introducción)

Canvas es una nueva etiqueta de HTML5 que permite generar gráficos de manera dinámica en una página y es soportada por Firefox, Opera, Safari e Internet Explorer 9 o superior.

Aunque por ahora es poco utilizada, se supone que será una de esas cosas que en un futuro cercano, transformarán la web.

Es una etiqueta vacía, un contenedor donde puede escribirse, dibujarse o agregarse imágenes que se controlan con JavaScript y por lo tanto, pueden ser modificados en tiempo real, creándose ilustraciones, animaciones, juegos ... casi cualquier cosa.

Hay muchos demos dando vueltas en la red; los diseñadores están experimentando y con esfuerzo, han conseguido cosas notables.

Por ejemplo, somethinghitme.com ha creado una réplica del viejo juegoSpace Invaders al que ha llamado Canvas Invaders y que podemos ver funcionando haciendo click en este enlace, ejecutándose aca mismo, en una ventana modal .

Algo similar se puede ver en un puzzle llamado Lights Off o en una réplica de Juego de la Vida de Conway, el Pacman de arandomurl.com, el extraño personaje animado creado por hakim.se, los puzzles de ~jcm, los demos de Kevin Roast, Mario Kart, CubeOut, Harmony, Biolab Disaster, el Canvas 3D de dhteumeuleu, Google Images Gift Box, los juegos de Dustin Montgomery, etc, etc.

Ya que no es una etiqueta que soporten las viejas versiones de Internet Explorer, hay una serie de proyectos que intentan solucionar el tema aunque lo logran de manera parcial o limitada. Uno de los más difundidos es el llamado ExplorerCanvas que no es otra cosa que un script que podemos agregar de manera condicional.

Por ejemplo una aplicación como Canvas Painter que también esta agregada a esta entrada y se abre en una ventana modal, debería funcionar en Internet Explorer 8.

La mayor parte de estos experimentos pueden descargarse e incluirse en cualquier página web y hacer eso no tiene demasiados secretos, se agregan como cualquier otro script; por ejemplo, este es uno llamado canvascape que funcionará de manera errática en IE8:

Hasta ahí no hay mayores problemas, hacemos un copypaste de algo y listo pero me da la impresión que estas facilidades van a ir más allá porque no es demasiado difícil generar nuestros propios gráficos así que vamos a ver si por lo menos, logramos empezar a descubrir de qué se trata esta nueva etiqueta, cómo utilizarla y luego, como siempre, todo quedará en manos de nuestra paciencia e imaginación.