Imágenes en HTML5 Canvas

por

En este artículo vamos a explicar cómo dibujar imágenes en HTML5 Canvas y la API que nos proporciona el navegador para renderizar gráficos. Dibujar imágenes añade un punto de dificultad pero también es una tarea esencial en la programación de videojuegos y por eso, voy a dividir toda su explicación en partes:

  • Imágenes en HTML5 Canvas: En este artículo aprenderemos a mostrar una imagen ya existente en el lienzo Canvas
  • Tiles en HTML5 Canvas: En este artículo aprenderemos a mostrar sólo una parte de una imagen ya existente en el lienzo Canvas
  • Sprites en HTML5 Canvas: En este artículo aprenderemos a crear y dibujar un Sprite (imagen animada) de una imagen ya existente en el lienzo Canvas
  • Cargador de imágenes JavaScript: En este artículo aprenderemos a cargar de forma dinámica cualquier imagen que necesitemos dibujar en nuestro lienzo Canvas

En este artículo, vamos a explicar cómo dibujar imágenes en HTML5 Canvas y sus pequeñas sutilezas, utilizando HTML5 Canvas y JavaScript.

Crear un lienzo canvas

Como es habitual, lo primero que necesitamos es configurar nuestro documento HTML con un elemento Canvas, el cual nos proporcionará una área gráfica para dibujar, comúnmente llamado lienzo canvas. Tambien vamos a añadir una imagen a nuestro HTML que utilizaremos para mostrarla en el Canvas como un gráfico. El ejemplo básico sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Imágenes en HTML5 Canvas</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="miCanvas" width="800" height="600">Canvas no soportado</canvas>
  <p><img id="mi_imagen" src="imagen.jpg"></p>
</body>
</html>

En este ejemplo hemos creado un lienzo HTML5 Canvas con las etiquetas <canvas></canvas> y justo debajo añadimos una imagen con los siguientes atributos:

  • ID Es un identificador único para referirnos al lienzo desde JavaScript y dibujar en él
  • width, height Son las dimensiones en píxeles de nuestro lienzo o ventana gráfica
  • El texto entre las etiquetas sólo se mostrará si el navegador no soporta la tecnología de dibujo HTML5 Canvas
  • La imagen que añadimos debajo del <canvas> tiene el ID «mi_imagen» que utilizaremos para referirnos a ella en JavaScript

Dibujo de imágenes en HTML5 Canvas

Para dibujar imágenes en HTML5 Canvas se utiliza la instrucción ctx.drawImage(imagen, x, y) que dibuja una imagen en las coordenadas especificadas.

  ctx.drawImage(imagen, x, y);

La explicación de esta instrucción es la siguiente:

  • ctx.drawImage(): Es el método del contexto de dibujo 2D del canvas HTML5 que hemos obtenido y se utiliza para dibujar una imagen, un elemento de video o un elemento canvas en el canvas.
  • imagen: Es el elemento que se va a dibujar en el canvas. Puede ser una imagen <img>, un elemento de video <video> o un elemento canvas <canvas>.
  • x: La coordenada horizontal en el canvas donde se comenzará a dibujar la imagen (esquina superior izquierda).
  • y: La coordenada vertical en el canvas donde se comenzará a dibujar la imagen (esquina superior izquierda).
  • Esta función admite otros parámetros opcionales que permiten especificar el ancho y el alto de la imagen en el canvas, así como las coordenadas de recorte de la imagen y el tamaño de la región recortada. Estos parámetros los veremos posteriormente y en otros artículos.

Cuando se llama a ctx.drawImage(), el contexto de dibujo 2D del canvas utiliza la imagen proporcionada y la coloca en el canvas en las coordenadas especificadas (x, y).

Dibujo de imágenes en HTML5 Canvas con JavaScript

Ahora vamos a crear el código JavaScript para dibujar unas cuantas veces nuestra imagen en el lienzo Canvas. Este código JavaScript vamos a insertarlo justo debajo de la etiquetas <img>:

  <script>
    window.onload = function () {
      // Obtener el elementos de dibujo Canvas
      let canvas = document.getElementById("miCanvas");
      let ctx = canvas.getContext("2d");
      // Obtenemos la imagen y la dibujamos 10 veces en puntos aleatorios del Canvas
      let imagen = document.getElementById("mi_imagen");      
      for (let i=0; i<10; i++) {
        let x = 100 + Math.random() * (canvas.width - 200);
        let y = 100 + Math.random() * (canvas.height - 200);
        ctx.drawImage(imagen, x, y);
      }
    }  
  </script>

Este código tiene un evento «onload» muy feo pero que en este momento es necesario, vamos a explicar cómo funciona:

  • Carga de la página: La función window.onload se ejecuta cuando la página web se ha cargado completamente. Ahora mismo esto es necesario para asegurar que la imagen se ha cargado completamente antes de proceder a trabajar con ella en el Canvas.
  • Obtención del canvas y contexto de dibujo: Obtenemos el elemento <canvas> y su contexto de dibujo 2D.
  • Obtención de la imagen: Obtenemos el elemento imagen mediante su ID.
  • Dibujo de la imagen: Utilizamos un bucle for para dibujar la imagen 10 veces en el canvas. En cada iteración del bucle:
    • Se generan coordenadas aleatorias (x, y) dentro del área visible del canvas, pero dejando un espacio de 100 píxeles desde el borde del canvas.
    • Se utiliza la instrucción ctx.drawImage(imagen, x, y) para dibujar la imagen en el canvas en las coordenadas aleatorias (x, y).

Al abrir el archivo HTML en un navegador deberías ver unas cuantas naves parecidas a estas:

Imágenes en HTML5 Canvas

Observa la imágen original justo debajo del lienzo Canvas y sus 10 copias dentro del lienzo enmarcado con un borde negro.

Modificar imágenes en HTML5 Canvas

La instrucción ctx.drawImage() es muy versátil y potente y permite añadir más parámetros que modifican la forma en que son tratadas y mostradas las imágenes en el canvas. De momento sólo hemos visto su forma más sencilla y el resto de parámetros se obtienen por defecto de la propia imágen.

Modificamos el código anterior para añadir un ancho y alto aleatorios en vez de obtenerlos de la imágen original, la forma de la instrucción ahora queda así ctx.drawImage(imagen, x, y, width, height); y el código JavaScript es el siguiente:

  <script>
    window.onload = function () {
      // Obtener el elementos de dibujo Canvas
      let canvas = document.getElementById("miCanvas");
      let ctx = canvas.getContext("2d");
      // Obtenemos la imágen y la dibujamos 10 veces en puntos aleatoreos del Canvas
      let imagen = document.getElementById("mi_imagen");      
      for (let i=0; i<10; i++) {
        let x = 100 + Math.random() * (canvas.width - 200);
        let y = 100 + Math.random() * (canvas.height - 200);
        let width = 100 + Math.random() * 100;
        let height = 50 + Math.random() * 50;
        ctx.drawImage(imagen, x, y, width, height);
      }
    }  
  </script>

Ahora al abrir el archivo HTML en un navegador deberías ver unas cuantas naves de tamaños diferentes como en la siguiente imagen:

Imagen HTML5 Canvas modificada

Hasta aquí hemos aprendido a dibujar imágenes en HTML5 Canvas con los parámetros básicos que nos proporciona la instrucción ctx.drawImage(); En próximos artículos iremos profundizando más en esta instrucción y veremos todo el pontencial que nos ofrece y cómo podemos aprovecharlo.

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

Deja un comentario