Etiqueta o tag canvas de HTML5

por

En este artículo vamos a explicar qué es la etiqueta o tag canvas de HTML5 para qué sirve y cómo se utiliza para mostrar gráficos en la web. La etiqueta o tag canvas es un nuevo elemento de la versión HTML5 que se utiliza para representar gráficos dinámicos, dibujar imágenes y crear animaciones en el navegador web utilizando JavaScript, se trata de una poderosa API para renderizar gráficos en el navegador.

La etiqueta o tag canvas no muestra nada por sí misma, sino que actúa como un lienzo o una superficie sobre la que se puede dibujar utilizando la API JavaScript de canvas. Para ello se necesita utilizar el contexto del lienzo canvas (context) y sus métodos, para realizar operaciones de dibujo, como trazos, formas geométricas, imágenes, texto y efectos visuales.

La etiqueta o tag canvas de HTML5 es muy versátil y permite crear aplicaciones interactivas, visualizaciones de datos, videojuegos, gráficos personalizados y mucho más. Si estás interesado en profundizar más sobre la etiqueta o tag canvas, te presento mi libro Programando Videojuegos: JavaScript donde hago una completa introducción enfocado a la creación de videojuegos en la web.

Características de la etiqueta o tag canvas

Algunas de las características y funcionalidades clave del tag canvas incluyen:

  • Gráficos de alta calidad: Permite crear gráficos de alta resolución y calidad, lo que lo convierte en una excelente opción para representar visualmente datos complejos o crear elementos visuales atractivos.
  • Animaciones: Se pueden crear animaciones y efectos visuales dinámicos utilizando las capacidades de dibujo y manipulación del canvas. Esto permite crear experiencias interactivas y atractivas para los usuarios.
  • Interactividad: Mediante el uso de eventos del mouse y del teclado, se pueden crear interacciones y respuestas en tiempo real con los elementos dibujados en el canvas. Esto permite que los usuarios interactúen con los gráficos y las visualizaciones de forma activa.
  • Compatibilidad multiplataforma: La etiqueta canvas es compatible con la mayoría de los navegadores modernos, lo que garantiza una amplia cobertura y acceso a través de diferentes dispositivos y sistemas operativos.

La etiqueta canvas en HTML5 proporciona una poderosa funcionalidad de dibujo y renderizado que permite crear gráficos, animaciones e interacciones personalizadas en el navegador web utilizando JavaScript. Es una herramienta fundamental para el desarrollo de aplicaciones web visualmente atractivas y dinámicas.

Definir la etiqueta o tag canvas en HTML5

Para definir nuestra etiqueta o tag canvas dentro de un documento HTML simplemente debemos añadir la siguiente linea de código:

<canvas id="canvasID" width="800" height="450">Canvas no soportado</canvas>
  • La etiqueta consta de un identificador id="canvasID" que utilizaremos para referirnos al lienzo de dibujo con JavaScript.
  • Establecemos un ancho y alto width="800" height="450" que definen las dimensiones del lienzo en píxeles.
  • Opcionalmente podemos añadir un texto que sólo se mostrará si el navegador no soporta la tecnología del canvas.

Una vez tenemos declarado nuestro elemento canvas podemos obtener todas las propiedades y métodos de dibujo de JavaScript para dibujar sobre él.

Obtener la API JavaScript del canvas

Siempre deberemos añadir las siguientes dos lineas de código JavaScript cuando queramos dibujar sobre un lienzo canvas:

    let canvas = document.getElementById("canvasID");
    let ctx = canvas.getContext("2d");
  • En la variable canvas obtenemos las propiedades del elemento HTML canvas que luego podemos utilizar para referirnos al lienzo.
  • En la variable ctx obtenemos las propiedades y métodos de dibujo de la API JavaScript del canvas y que utilizaremos para dibujar gráficos sobre él.

Podemos ver un ejemplo completo de funcionamiento de la etiqueta canvas y la API JavaScript del canvas en el siguiente código de ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>El lienzo canvas</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
  <style>
    body {
      font-size: 18px;  
      text-align: justify;
      background-color: aliceblue;
    }
    canvas {
      width: 50%;
      display: block;
      background-color: black;
    }
  </style>
</head>
<body>
  <h1>El lienzo canvas</h1>
  <p>Creación de un lienzo de dibujo "canvas" en HTML5</p>
  <pre>&ltcanvas id="canvasID" width="800" height="450"&gtCanvas no soportado&lt/canvas&gt</pre>
  <canvas id="canvasID" width="800" height="450">Canvas no soportado</canvas>    
  <h2>Métodos y propiedades de la API de dibujo JavaScript</h2>
  <p>Obtenemos las propiedades y métodos de dibujo sobre el canvas con JavaScript</p>
  <pre>    
    let canvas = document.getElementById("canvasID");
    let ctx = canvas.getContext("2d");
  </pre>
  <p>Listado de métodos y propiedades:</p>
  <ul>
  <script>
    // Obtenemos el objeto de dibujo sobre el canvas
    let canvas = document.getElementById("canvasID");
    let ctx = canvas.getContext("2d");
    for(let property in ctx) {
      if (typeof ctx[property] === 'function') document.write('<li> function '+property+'()</li>');
      else document.write('<li> propiedad: '+property+'</li>');      
    }
  </script>
  </ul>
</body>
</html>

En esta sencilla página HTML definimos un lienzo con el tag canvas y obtenemos la API JavaScript para dibujar sobre él. Después recorremos en un bucle todas las propiedades obtenidas en la variable ctx y mostramos las funciones y propiedades disponibles para crear gráficos.

La API JavaScript del canvas es muy extensa y algo compleja en algunos aspectos, aquí sólo hacemos una breve introducción y mostramos sus métodos y propiedades.

Si estás interesado en las técnicas y características del elemento canvas y la API de dibujo JavaScript orientados a la creación de videojuegos, puedes profundizar conceptos comprando alguno de mis libros Programando Videojuegos: JavaScript o Programando Videojuegos 2.0: JavaScript según sea tu nivel de programación.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario