Mosaico de imágenes en Canvas

Los patrones de repetición o patterns son muy utilizados en el diseño web. HTML los tiene y CSS por supuesto que también. Todos los habremos usado en cantidad de ocasiones, para conseguir la repetición de una imagen que colocamos como fondo de una página o de cualquier otro elemento de una web. El componente Canvas del HTML 5 también tiene su propia implementación de los patrones, con los que podemos hacer fácilmente un mosaico en el que se repita constantemente una imagen.

En el Manual de Canvas ya vimos cómo trabajar con imágenes, para conseguir que dentro de un lienzo se pueda colocar una imagen o parte de ella. Esos conocimientos también nos servirán en gran medida para el trabajo con patrones.

Definir un patrón

Para definir un patrón utilizamos el método createPattern() que pertenece al contexto del canvas. Este método recibe un par de parámetros. El primero es la imagen que deseamos utilizar como patrón y el segundo es el tipo de repetición que queremos implementar.

La imagen que deseamos utilizar la podemos sacar de un objeto Image de Javascript y el tipo de repetición es similar al que se utiliza cuando se define un fondo de imagen en CSS: "repeat" (para un mosaico que se repite tanto en la horizontal como en la vertical, "repeat-x" (para repeticiones en la horizontal), "repeat-y" (para repetir la imagen en la vertical) y "no-repeat", que no producirá ninguna repetición).

Una vez que tenemos definido un patrón todavía tenemos la mitad de trabajo por delante para trabajar. Ese patrón simplemente estará declarado como objeto en Javascript y listo para usar en un canvas, pero para ello debemos configurar el estilo de relleno y luego rellenar de color un área.

var miPatron = ctx.createPattern(objeto_imagen, 'repeat');

Con la línea anterior tendríamos creada una variable miPatron que contiene un patrón de imagen listo para ser utilizado.

Configurar un patrón como estilo de relleno de color

La propiedad fillStyle del contexto del canvas, que vimos al hablar del color de relleno y de trazado en canvas, http://www.desarrolloweb.com/articulos/color-relleno-trazado-canvas.html permite, aparte de especificar el color de relleno, indicar un patrón para utilizar para rellenar un área. Con esto conseguiremos pintar un área con un patrón o mosaico de imagen, en lugar de un color plano.

ctx.fillStyle = miPatron;

Con esto conseguimos que, la próxima vez que se rellene de color un área, se haga con un mosaico de imagen o pattern, en lugar de un color plano.

Rellenar de color un área

Ahora podemos rellenar de color cualquier área, que se rellenará con el patrón definido anteriormente. Es tan sencillo como utilizar un método que nos permita aplicar color, como fillRect(), visto también anteriormente.

ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

Con esta línea rellenaríamos de color todo el área disponible en el elemento canvas, es decir, un rectángulo que va desde la coordenada (0,0) hasta toda la anchura y la altura del canvas. Como previamente se aplicó el patrón a la propiedad fillStyle, en vez de rellenar con un color se rellenará con un mosaico de imagen.

Ejemplo completo de relleno con un patrón definido por una imagen

Para acabar ponemos el código de un ejemplo que hace uso de una imagen para crear el pattern.

window.onload = function(){
   //Recibimos el elemento canvas
   var ctx = cargaContextoCanvas('micanvas');
   if(ctx){
      //Creo una imagen con un objeto Image de Javascript
      var img = new Image();
      //indico la URL de la imagen
      img.src = 'logo-desarrolloweb.gif';
      //defino el evento onload del objeto imagen
      img.onload = function(){
         //Creo un "pattern" en el canvas
         var miPatron = ctx.createPattern(img, 'repeat');
         ctx.fillStyle = miPatron;
         ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
      }
   }
}

Este ejemplo se puede ver en una página en marcha.

Como hemos visto, no hay mucho misterio en el uso de patrones. Es un poco más laborioso que colocar una imagen en el canvas, pero mucho menos que si tuviéramos que escribir un script para realizar el mosaico "a mano".