Canvas es una de las características más promocionadas de HTML5 ¿Por qué? Probablemente porque muchos la han mencionado como la que matará a Flash. La realidad indica que este elemento dota de un gran potencial a HTML5 y nos permite realizar una gran cantidad de cosas nuevas en nuestros desarrollos.

Varios libros se han escrito tomando esta característica como eje y, seguramente, muchos más se escribirán, pero lo importante es conocer primero su base. Cada vez que dicto clases de HTML5 siempre hay gran curiosidad y me preguntan mucho por este elemento, así que me pareció interesante realizar un listado de cosas que todos deberían saber acerca de Canvas:

• Canvas es un elemento nuevo en HTML5. Tiene una API sobre la que podremos trabajar e interactuar empleando JavaScript.
• Mediante el elemento Canvas, podremos crear gráficos y animaciones, pero también zonas interactivas. Es útil tanto para aplicaciones, demostraciones y, especialmente, para una nueva generación de juegos en la Web.
• Crear gráficos con Canvas puede parecer complejo, pero existen aplicaciones que nos facilitan el camino. Por ejemplo, podemos dibujar con Adobe Illustrator y, gracias al plugin AI2CANVAS, exportar al Canvas de HTML5.
• Canvas funciona en la mayoría de los navegadores modernos. El soporte básico de Canvas está disponible en: Internet Explorer 9 (o superior), Firefox 3.6 (o superior), Chrome 4.0 (o superior), Safari 3.1 (o superior), Opera 9 (o superior). Vale decir que también es soportado por navegadores para móviles, como el caso de Safari para iOS y Android Browser, entre otros.
• La mayoría de los navegadores mejoran el soporte de Canvas a través de sus versiones (por eso la referencia del ítem anterior es sobre el soporte básico). En la familia de Internet Explorer no encontraremos soporte en la versión 8 y anteriores. Existen algunas librerías que nos permiten «simular» las funcionalidades de Canvas, mediante el uso de Polyfills. Lo que siempre recomiendo es realizar tests de performance en diferentes browsers si recurrimos a alguna de estas soluciones, ya que, según las características de nuestro desarrollo, podríamos encontrar un bajo rendimiento en algunos navegadores.
• Canvas puede trabajar con contexto de dos dimensiones (2D) o de tres dimensiones (mediante la implementación de WebGL).
• En el Canvas se puede trabajar con transparencias mediante colores mediante globalAlpha. También podremos aprovechar lo que nos ofrece RGBA.
• Canvas nos permite dibujar y trabajar tanto con formas simples (líneas) y otras de gran complejidad. Podemos emplear imágenes de diferentes tipos en su interior, desde JPEG hasta gráficos SVG.
• El elemento Canvas nos permite manipular sus contenidos a «nivel píxel», de esta forma podemos hacer deformaciones, cambiar su color o lograr efectos realmente impactantes, tales como explosiones o crear rompecabezas.
• Canvas puede aprovechar la aceleración de Hardware para hacer más eficientes las animaciones y dibujos complejos. La evolución de los navegadores con el soporte de estas características es clave para mejorar aún más la performance.

Para quienes deseen saber más acerca de Canvas encontrarán muy buenos artículos y tutoriales en CSS3 & HTML5.

¿Te ha gustado esta nota? ¿Te interesa aprender más sobre HTML5 para implementarlo en tus proyectos? Escríbeme y cuéntame sobre tus necesidades.