El Canvas es una de las tecnologías más potentes que podemos emplear en el ámbito web, el canvas no es más que un lienzo que permite la creación de gráficos, los cuales (los gráficos) están compuestos de figuras simples, las primitivas de siempre, líneas, círculos/esferas, cuadrados/rectángulos como veremos en esta misma entrada un poco más adelante en los cuales vamos a profundizar en el uso del Canvas, además de tutoriales que les dejaremos para que vean posibles usos sobre el Canvas.

Una vez aclarado que es el canvas, lo siguiente que tenemos que conocer es sobre su compatibilidad; muchos navegadores tienen soporte hoy en día para trabajar con la API de Canvas; los navegadores principales como Google Chrome y Firefox e incluso los navegadores de Microsoft soportan esta potente tecnología que nos permite dibujar gráficas tanto sencillas como simples, nos permite realizar composiciones de imágenes o fotografías como vimos en otras entradas:

Y también el renderizado de vídeo en tiempo real; así que el Canvas es básicamente eso, un lienzo en donde podemos realizar dibujos.

Todo comienza a través de la etiqueta <canvas> que se habilita un área o mejor dicho lienzo en donde es posible dibujar, escribir o incluso renderizar imágenes a través de scripts realizados con JavaScript que es el lenguaje de programación seleccionado para trabajar con esta tecnología:

<canvas id="myCanvas" width="500" height="500" >
<p>Su navegador no soporta canvas :(</p>
</canvas>

Soporte del canvas en los navegadores

Los navegadores modernos desde hace un buen tiempo cuenta con soporte nativo para la etiqueta canvas; sin embargo, es recomendable verificar el soporte; como muchas otras etiquetas, podemos verificar el soporte desde la misma etiqueta; es decir cualquier cosa que se encuentre entre las etiquetas de apertura y cierre de canvas será interpretado por navegadores que no soportan la etiqueta:

  <canvas>
    Su navegador no soporta Canvas
  </canvas>

A nivel de JavaScript, podemos realizar la siguiente validación para verificar si está soportada el API de Canvas en los navegadores:

function isCanvasSupported(){ 
  var elem = document.createElement('canvas'); 
  return !!(elem.getContext && elem.getContext('2d')); 
}

A lo que nos lleva a que el canvas debe tener tres atributos aunque uno de ellos los puedes definir también por el CSS; el primero es el ID que es la forma en la que lo accedemos, y los otros son el ancho y el alto definidos por el width y el height respectivamente.

Algunas ventajas de usar el canvas en nuestras aplicaciones

• Animable. Cada objeto que dibujamos en el canvas puede ser animado.
• Interactivo. El Canvas es 100% interactivo y responde a todas las acciones de teclados y ratones.
• Flexible. Podemos dibujar cualquier cosa en el Canvas, imágenes, líneas, figuras geométricas, polígonos, etc y animar cada uno de esos objetos.
• Soporte de los navegadores. La mayoría de los navegadores modernos desde hace mucho que soportan el canvas: Soporte de navegadores.
• El canvas es un estándar. Como no lo son otras tecnologías como el moribundo Flash y Silverlight, Canvas forma parte del HTML5 y cualquier navegador que se respete debe darle soporte.

Ejemplos y Tutoriales sobre el Canvas: ¿Cómo funciona la etiqueta <canvas>?

Finalmente, vayamos a la parte interesante de todo esto del canvas y empecemos a realizar nuestro primer ejemplo.

Con tres sencillos pasos podemos comenzar a trabajar con esta etiqueta:

1. Referenciando el canvas del DOM del HTML con nuestro JavaScript

Lo primero es obtener una referencia al canvas con el cual deseamos trabajar; en este caso, la etiqueta <canvas> tiene el identificador myCanvas:

var myCanvas = document.getElementById("myCanvas");

2. Obteniendo el contexto del canvas vía JavaScript

Para realizar cualquier operación con el canvas , entiéndase dibujar gráficos y/o imágenes debemos obtener el contexto del elemento canvas y de una vez acceder a la API:

var ctx=c.getContext("2d");

3. Dibujando primitivas

Ahora si, podemos empezar a dibujar sobre nuestro canvas; veamos una serie de ejemplos que ejemplifican el uso del canvas.

3.1 Dibujando una línea con canvas

El ejemplo o experimento más sencillo que podemos hacer consiste en dibujar una simple línea; el Hola Mundo en el mundo del Canvas: para ello necesitamos los siguientes métodos:

• moveTo(x,y) punto de comienzo de la línea.
• lineTo(x,y) punto final de la línea.
• stroke() dibuja la línea.

3.2 Dibujando un círculo con canvas

Para dibujar un círculo en el canvas se debe usar los siguientes métodos:

• Un Path es un conjunto de dibujos que realizamos dentro de un canvas; para eso debemos de utilizar el método beginPath() de esta forma damos por terminado un Path cuando volquemos su contenido con el método closePath(); nada en el path será dibujado hasta que se indique al contexto que dibuje el trazado stroke().
• arc(x,y,r,inicio,final) dibuja un círculo en el canvas.
  • 'x' y 'y' nos indican el centro del círculo.
  • 'r' radio del círculo.
  • 'inicio' y 'final' ángulo de comienzo y final respectivamente.
• lineTo(x,y) punto final de la línea.
• stroke() dibuja la línea.

3.3 Dibujando un texto con canvas

Para dibujar existen dos métodos texto con algún formato dentro del canvas.

• font permite definir la fuente del texto.
• fillText(texto,x,y) el texto a dibujar en el canvas y su posición dentro del canvas.
• strokeText(texto,x,y) permite dibujar un texto sin relleno en el canvas dado la posición "x" y "y".
• stroke() dibuja la línea.

3.4 Dibujando una imagen con canvas

Es posible que te preguntes cuál es el objetivo de dibujar una imagen en un canvas aparte de poder mezclarla con otras primitivas y/o imágenes, además de esto podemos alterar cada uno de los píxeles que componen a la imagen y aplicar algún Procesamiento Digital de Imágenes; eso entre otros experimentos que ya señalamos en otros tutoriales relacionados: