HTML 5: Canvas

HTML5 es una nueva especificación de HTML, que ya está provocando una pequeña revolución, aunque que por el momento es solo un borrador.

HTML5 hace énfasis en varios temas, ninguno revolucionario por si solo, o al menos no para todo el mundo, pero que en conjunto, una vez que se vuelva estándar, tal vez nos lleve a una nueva dimensión en la web.

Uno de los temas que trae HTML5 es la etiqueta canvas. Esta pequeña etiqueta, que representa a una superficide de dibujo, muy habitual en cualquier entorno gráfico, puede generar una pequeña revolución. Hasta hace poco, no existía ninguna forma estándar de realizar dibujos directamente en el navegador, que salvo por algunos ingeniosos y oscuros hacks en CSS para crear ciertas figuras geométricas, las alternativas eran muy pocas. En realidad, si había que generar gráficos en el navegador, nos encontrábamos con pocas opciones:

• usar Flash, el cual solo funciona si hay un plugin de flash instalado, y a pesar de ser una de las opciones más populares, el soporte en distintas plataformas y arquitecturas es muy variable. Incluso, es uno de los grandes dolores de cabeza para la estabilidad de los navegadores, siendo una de las principales causas de problemas y cuelgues de estos.
  
• usar Java, en particular las applets. Otra opción problemática, porque también requiere de un plugin en el navegador, el tiempo de arranque de los applets suele ser mayor que en flash, y sufre de los mismos inconvenientes.
• crear el dibujo en el servidor, mostrando la imagen resultante en el navegador, y usar ajax o algún mecanismo similar para realizar algún tipo de actualización. Es la opción más universal, pero la más ineficiente, porque limita mucho las posibilidades, como las de animación.
• y otras soluciones intermedias o combinaciones de las anteriores.

Canvas, provee una superficie de dibujo con varias primitivas gráficas. Hay quien lo compara con Postscript o OpenGL. La gracia de Canvas, es que puede programarse, animarse y modificarse usando solo JavaScript, el lenguaje universal que ya soportan todos los navegadores.

¿Y SVG? ¿No es lo mismo? No. SVG nos provee gráficos vectoriales, que también son creados a partir de figuras básicas, de forma que ocupan poco lugar y pueden verse con la misma calidad sin importar cuánto ampliemos su tamaño. A pesar de su sencillez, mediante el uso de gradientes y canales alfa, también permite crear imágenes increíblemente realistas. Los Canvas, por otro lado, son como los viejos bitmaps: cuadrículas de pixels, con la capacidad de ser manipulados por JavaScript. Ambos están relacionados y se complementan, pero son diferentes.

Podemos pensar en Canvas como el equivalente de los gráficos creados con Gimp o Photoshop. Y en SVG como el equivalente de los gráficos creados por Corel Draw o Illustrator, siendo Inkscape el programa de software libre más destacado en la creación de estos gráficos.

¿Pero falta mucho para poder empezar a usarlo? ¿Si apenas es un borrador, debe faltar mucho, no? Bueno, en realidad, ya está siendo implementado en todos los navegadores modernos, y en las últimas versiones, o en las próximas a salir, ya está incluído el soporte experimental de estas y otras características de HTML5. Como es el caso de Firefox, Safari, Chrome y Opera, salvo IE, que como siempre, viene atrasado y/o se desconoce sus planes a futuro. Afortunadamente, es tal el interés de pesos pesados en la industria, como Google, que ya se están haciendo plugins y extensiones para IE, para que en caso que MS decida no incluir estas nuevas características, se puedan utilizar igualmente. No será lo mismo que un soporte nativo más eficiente, pero permitiría realizar sitios aprovechando el nuevo estándar, incluso si MS dejara rezagados a sus usuarios con IE.

Para seguir leyendo sobre el tema:
HTML 5 Canvas element
5 clever uses of the canvas tag
Javascript Wolfenstein 3D
Una presentación de Mozilla Corp. que compara SVG y Canvas
Algunos ejemplos
Compatibilidad actual de los navegadores
Tutorial de Canvas en Mozilla
Una cheat-sheet para Canvas
Lo que dice el borrador del estándar

Entonces, ¿al fin podemos decir: ¡Chau Flash!? No, no, tranquilos. Flash tiene muchos usos. De hecho, una de las cosas que más popularizó el uso de Flash en la llamada web 2.0, fue su capacidad de reproducir video, como nos demostró el éxito de Youtube y Vimeo. Pero... html5 nos trae más sorpresitas: incorpora una etiqueta video que permite reproducir video de forma nativa y estándar en el navegador, y ¡sin necesidad de ningún plugin extraño! Pero dejaremos eso y otras perlitas para otro artículo :)