Patrones: el mosaico del canvas

En programas de dibujos habrás usado quizás los patrones: imágenes que se repiten para rellenar areas o para dibujar. Son como las piezas de un mosaico.

El contexto 2D del canvas puede crear y utilizar patrones mediante el método createPattern() que utiliza dos argumentos: uno especifica un objeto imagen y el otro es un valor de repetición similar al bacgkground-repeat de CSS que puede ser:

repeat: El patrón se repite tanto en horizontal como en vertical.

repeat-x, El patrón se repite solo en horizontal .

repeat-y, El patrón se repite solo en vertical.

no repeat: el patrón no se repite.

Luego se podrá usar como relleno o como brocha, o sea, para trazar lineas.

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

var img = new Image();

img.src= "/canvas/gotas.gif";

img.onload= function(){

let patron = lapiz.createPattern(img, "repeat");

lapiz.fillStyle=patron;

lapiz.fillRect(5, 5, 300, 300);

}

</script>

Como es una imagen cargada desde un archivo, nos aseguramos que esté disponible para el patrón, por eso se usa un evento onload: cuando se carga hacer lo que diga function(). En este caso la función crea el patrón a partir de la imagen y rellena el rectángulo.

Puedes usar otro canvas de la página para crear el relleno del mosaico como en este ejemplo donde lo usamos de relleno y para dibujar, como pincel de dibujo.

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

var objPat = document.getElementById("patron")

var ctxPat = objPat.getContext("2d");

ctxPat.fillStyle = "red"

ctxPat.fillRect(4,4,12,12);

var patron = lapiz.createPattern(objPat, "repeat");

lapiz.fillStyle=patron;

lapiz.fillRect(5, 5, 300, 300);

//Ahora uso el patron para dibujar

lapiz.beginPath();

lapiz.lineWidth= 20;

lapiz.strokeStyle = patron;

lapiz.strokeRect(340,100, 100,80);

</script>