Elemento Canvas en HTML5

En la unidad anterior vimos cómo hacer transformaciones y transiciones sobre los elementos de nuestra página web. De esta forma conseguíamos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS. Además, en esta unidad también hemos visto cómo utilizar la propiedad animation de CSS para crear animaciones concatenadas.

En este apartado vamos a seguir viendo cómo crear animaciones, pero en esta ocasión veremos el elemento <canvas>. Este elemento nos permite pintar gráficos, crear animaciones y desarrollar videojuegos mediante un API de Javascript. 

Lo primero que tenemos que hacer para trabajar con Canvas es crear un lienzo y, a partir de ese lienzo, incluir elementos y modificarlos. Veamos los pasos a seguir.

1. Pasos para crear un Canvas:

Para utilizar Canvas haremos lo siguiente:

1) Crearemos un lienzo (espacio rectangular vacío) en el que serán mostrados todos los elementos:

<canvas id="lienzo" width="500" height="300"> 
     El navegador no soporta canvas 
</canvas> 

2) Accedemos al elemento <canvas> desde Javascript:

Primero, accedemos al objeto DOM del elemento, normalmente, a través del método getElementById, y posteriormente, utilizamos el método getContext para obtener el contexto de dibujo, sobre el cual, se puede dibujar. 

var ctx=null, canvas=null;
function iniciar()
{
      canvas=document.getElementById('lienzo');
      ctx=canvas.getContext('2d');
}
window.addEventListener("load", iniciar, false);

En el ejemplo anterior, guardamos una referencia al elemento <canvas> en la variable canvas y el contexto de dibujo lo creamos utilizando getContext(‘2d’). Con esto obtenemos un contexto para dibujar en 2 dimensiones. 

3) Dibujar formas en el lienzo:

A continuación, podemos empezar a crear formas y realizar manipulaciones según las coordenadas concretas del contexto. Veamos las formas básicas que podemos crear en nuestro lienzo.

2. Formas básicas en Canvas

2.1. Rectángulos

La función fillRect(x, y, width,height) nos permite dibujar un rectángulo ‘relleno’ y la función strokeRect(x, y,width, height) un rectángulo con sólo su contorno. Mediante lineWidth especificamos el ancho de su contorno.

Se puede establecer el color mediante las propiedades fillStyle y strokeStyle. Es posible usar rgb, rgba, un código hexadecimal o la palabra clave de un color.

ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(100, 10, 60, 50);
ctx.lineWidth = 5
ctx.strokeStyle = "red";
ctx.strokeRect(200, 70, 60, 50);

Mediante la función clearRect(x, y, width, height) podemos borrar cualquier elemento que haya sido dibujado en el Canvas dentro de un área.

ctx.clearRect(210, 20, 25, 25);

2.2. Líneas

Para indicar que queremos dibujar una línea lo primero que debemos hacer es llamar a la función beginPath().

A continuación llamaremos a moveTo(x, y) para movernos a la posición donde nuestra línea comenzará. Y a lineTo(x, y) para ‘dibujar’ la línea. Para hacerla visible utilizaremos la función stroke().

Podemos especificar el ancho y el color de la línea con las propiedades lineWidth y strokeStyle.

ctx.beginPath();
ctx.moveTo(5, 5);
ctx.lineTo(5, 295);
ctx.moveTo(295, 5);
ctx.lineTo(295, 295);
ctx.lineWidth = 1;
ctx.strokeStyle = "#CC0000";
ctx.stroke();

2.3. Arcos

Para indicar que vamos a dibujar un arco llamaremos inicialmente a la función beginPath(). Dibujaremos un arco o un círculo con la función arc(x, y, radio, angIni, angFin, sentidoAntihorario). X e y indican el centro del círculo, y los ángulos han de indicarse en radianes. El arco no será visible hasta llamar a fill() o a stroke().

ctx.beginPath();
 // 2*Math.PI es la manera corta de expresar 360 grados
 // en radianes.
 // var radianes = (Math.PI / 180) * grados;
 ctx.arc(150, 150, 50, 0, 2*Math.PI);
 ctx.lineWith = 10;
 ctx.strokeStyle = "yellow";
 ctx.stroke();

2.4. Texto

A través de la función fillText(texto, x, y) podemos dibujar texto dentro del Canvas. Podemos dar formato al texto estableciendo previamente las propiedades font, textAlign y fillStyle.

ctx.font = 'Bold 20px Tahoma';
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
ctx.fillText('ENIUN', 50, 50);

2.5. Imágenes

Para añadir una imagen lo primero que tenemos que hacer es crear un objeto Image y establecer su propiedad src.
Con la función drawImage(objImg, x, y) añadiremos la imagen al Canvas.

var img = new Image();
img.src = 'img/eniun.png';
img.onload = function(){
   ctx.drawImage(img, 10, 10);
};

Si ejecutamos el método .drawImage() sin llamar al evento .onload puede que no se ejecute correctamente si todavía no se ha cargado la imagen. Por este motivo se utiliza el evento .onload.

Más información:

• HTML5 Canvas reference
• HTML5 Canvas Cheat Sheet

Ejemplo con todos los elementos estudiados:

default

Ejercicios propuestos

Actividad 7.1

Añade un nuevo artículo en el blog de tu proyecto web que pinte un Canvas con todos los elementos que hemos visto.