Canvas Flash

¿Qué es Canvas?

En este artículo vamos a ver los conceptos básicos de Canvas de una forma práctica, incluso podrás modificar y ejecutar el código desde aquí mismo.

Canvas es un elemento de HTML 5 que permite dibujar gráficos, manipular imágenes y realizar animaciones en una página web de forma dinámica. Es decir, el gráfico se crea en el momento en que se carga la página. El gráfico se define mediante programación, usualmente Javascript. Una vez creado el gráfico se pueden programar acciones para que el usuario interactue con él, por ejemplo, haciendo clic para arrancar una animación o arrastrando un elemento del gráfico.

Aunque el elemento Canvas se crea con la etiqueta <canvas> </canvas> al hablar de Canvas en sentido amplio nos referimos a toda la API que incluye un conjunto de funciones para dibujar, líneas, rectángulos, círculos, etc. así como para rotar, escalar, transformar elementos gráficos, y otras funciones de variado uso.

Al definir un Canvas en una página web se crea un lienzo de dibujo o área de dibujo rectangular. Después de crear el dibujo lo que queda es un "mapa de bits", es decir, cada coordenada del lienzo tiene asignado un color, no queda ninguna estructura de lo que contiene el lienzo. Canvas no crea objetos vectoriales al estilo de otros entornos como SVG o Flash, sino mapas de bits como una imagen fotográfica.

De hecho podemos cargar una imagen fotográfica en el Canvas y manipular sus pixeles uno a uno.

Canvas ha sido incorporado recientemente al HTML y no puede ser representado por los navegadores antiguos. Se requiere una versión actualizada de Chrome (26), Firefox (20), Internet Explorer(10), Safari (6.0), etc. Es conveniente dar un contenido alternativo para los navegaores que no soportan Canvas, como una imagen fija o un texto aclaratorio, como veremos más adelante.

Canvas frente a Flash

Hasta la fecha (2013) la mayoría de los gráficos y animaciones interactivas de la web se realizan con Adobe Flash, a partir de ahora está tomando fuerza la opción Canvas/HTML5, en el futuro inmediato parece que seguirá usándose Flash hasta que Canvas sea capaz de realizar todo lo que Flash puede hacer.

Canvas es un elemento estándar de HTML5 y cualquier navegador debe ser capaz de manejarlo, mientras que Flash es una tecnología de una empresa que requiere instalar en el navegador un complemeto (plug-in).

Hasta la fecha la mayoría de los navegadores tienen instalado el complemento de Flash mientras que todavía hay muchos navegadores instalados que no soportan Canvas. Sin embargo esto va a cambiar rápidamente puesto que los navegadores nuevos que se van instalando no llevan Flash y sí soportan Canvas.

Desde el punto de vista del creador de gráficos es más fácil

...