HTML: Canvas

El elemento <canvas> se utiliza para representar gráficos o animaciones a través de secuencias de comandos, es decir, de forma programada (normalmente con JavaScript). Este elemento es un recurso de gran valor que permite diseñar todo tipo de animaciones e interactividad para los documentos HTML.

Se trata de un elemento que fue añadido en la versión 5 de HTML, y tiene dos etiquetas: <canvas> (de apertura) y </canvas> (de cierre). Cuando se introduce en un documento HTML, lo que hace es definir una zona rectangular. Sus beneficios se hacen visibles cuando se usa con lenguajes de programación.

Es recomendable introducir un contenido alternativo entre sus etiquetas para aquellos navegadores web que no tengan soporte del elemento <canvas>. Por ejemplo, un texto informando al lector que el contenido no se mostrará:

<canvas>
  Contenido no disponible. Su navegador web no admite Canvas.
</canvas>

Como resultado, aparecerá un rectángulo vacío:

Atributos de Canvas

Para definir el rectángulo del elemento <canvas> se usan los dos únicos atributos específicos que posee: width y height, cuyos valores deben ser números enteros que representan píxeles. No es necesario especificar la unidad. Sus valores por defecto son 300 y 150, respectivamente.

Ejemplo de definición de ancho y alto de un elemento Canvas:

<canvas width="200" height="100">
  Contenido no disponible. Su navegador web no admite Canvas.
</canvas>

El elemento <canvas> también tiene disponibles los atributos globales y los atributos de eventos, como cualquier otro elemento HTML.

Asociar gráfico y código

Para vincular un gráfico de Canvas con una porción de código JavaScript se usa el atributo id en el elemento <canvas>. A través de la función getElementById() de JavaScript es posible apuntar a cualquier elemento, usando como parámetro la cadena de texto del identificador.

Ejemplo de código HTML sobre cómo asociar un gráfico con un código:

<canvas id="ejemplo1"></canvas>

Ejemplo de código JavaScript sobre cómo apuntar a un gráfico Canvas:

var canvas = document.getElementById("ejemplo1");

En este punto del curso no se necesita saber JavaScript, pero se recomienda aprenderlo para profundizar en el campo del desarrollo web.

Ejemplo de gráfico Canvas

Ejemplo de un gráfico Canvas en el que se crea un rectángulo de 200×100 píxeles y se dibuja en su interior una línea de color rojo que será completamente horizontal y estará centrada verticalmente.

Código HTML usado para el ejemplo 1:

<canvas id="ejemplo1" width="200" height="100">
  Su navegador web no admite Canvas.
</canvas>

Código JavaScript usado para el ejemplo 1:

var c = document.getElementById("ejemplo1");
var ctx = c.getContext("2d");
ctx.moveTo(0,50);
ctx.lineTo(200,50);
ctx.lineWidth=20;
ctx.strokeStyle="Red";
ctx.stroke();

Resultado del ejemplo 1:

Ejemplo de animación Canvas

En el siguiente ejemplo se crea una pequeña animación con <canvas>. En una zona rectangular de 300×200 píxeles, una circunferencia de color rojo “flotará” hasta encontrar los bordes, donde rebotará y continuará su camino en la dirección opuesta, realizando este camino de forma infinita.

El código HTML de este ejemplo es muy simple:

<canvas id="ejemplo2" ></canvas>

En cambio, el código JavaScript es mucho más complejo. El lector no necesita comprender esta porción de código, pero verla permite entender la complejidad que requieren los gráficos realizados con el elemento <canvas>.

var el = document.getElementById("ejemplo2");

el.width   = 300;
el.height  = 200;

var cx     = el.getContext( '2d' );
var radius = 50;
var x      = radius + Math.random() * (300 - radius * 2);
var y      = radius + Math.random() * (200 - radius * 2);
var dx     = (Math.random() - 0.5) * 2;
var dy     = (Math.random() - 0.5) * 2;

function animate() {
  requestAnimationFrame(animate);
  cx.clearRect(0, 0, 300, 200);
  if (x + radius > 300 || x - radius < 0) {
    dx = -dx;
  }

  if (y + radius > 200 || y - radius < 0) {
    dy = -dy;
  }

  x += dx;
  y += dy;

  cx.beginPath();
  cx.arc(x, y, 50, 0, Math.PI * 2, false);
  cx.strokeStyle="Red";
  cx.stroke();
}

animate();