Crea tu web, tutor html, css

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(){ var 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.