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.

<canvas width="600" height="300" id="mipanel"></canvas>

<script> 

    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>

Prueba este código

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.

<canvas width="600" height="400" id="mipanel"></canvas>

<canvas width="20" height="20" id="patron" style="display: none"></canvas>

<script> 

    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>

Prueba este código

Puedes crear un fonod de imagen en un canvas utilizando patrones que se repitan o no.