Patrones: el mosaico del canvas

En programas de dibujos hab´ras 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 se usa el método createPattern()  que utiliza dos argumentos: uno especifica un objeto imagen y el otro es un valor que puede ser:

repeat: El elemento se repite tanto en horizontal como en vertical.

repeat-x, El elemento se repite solo en horizontal .

repeat-y, El elemento se repite solo en vertical.

no repeat: el elmento 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é disponibla pra el patrón, por eso se usa un evento onload: cuando se carga hacer lo que diga function().

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