Como crear patrones
El <canvas> nos lo pone fácil a la hora de crear y utilizar patrones ( patterns ). Un patrón puede ser creado a partir de una imagen, un video,
o incluso de otro <canvas>, y puede ser configurado para repetirse en todas las direcciones ( repeat ), o puede repetirse en una sola dirección, ( en repeat-x o en repeat-y ).
Incluso puede ser configurado para que no se repita ( no-repeat ).
Para crear patrones utilizamos el método createPattern(img, dir).
El primer argumento representa la imagen que utilizamos para nuestro patrón.
El segundo argumento representa la dirección, y puede tomar los siguientes valores, que tienen el mismo significado que en el CSS:
no-repeat, repeat, repeat-x y repeat-y.
| JavaScript | Descripción | Defecto | |
|---|---|---|---|
| fillStyle | context.fillStyle=color|gradient|pattern; | Determina o devuelve el color, gradiente o patrón del relleno. | black |
| strokeStyle | context.strokeStyle = color | gradiente | patrón; | Determina o devuelve el color, gradiente o patrón de la línea. | negro |
| createPattern() | context.createPattern(img,"repeat | repeat-x | repeat-y | no-repeat"); | Repite una imagen en la dirección especificada. | |
| fillRect() | context.fillRect(x,y,anchura,altura); | Dibuja y rellena un rectángulo desde un punto (x,y). | black |
| fillText() | context.fillText(text,x,y,maxWidth); | maxWidth opcional | black; |
| fill() | context.fill(); | Rellena una forma geométrica. | black |
Vea la chuleta con las propiedades y metodos() de canvas.
Crear un patrón desde una imagen
Cuando creamos un patrón desde una imagen es mejor hacerlo cuando la imagen se haya cargado (img.onload), ya que las imágenes pueden cargarse lentamente,
y probar a crear un patrón desde una imagen inexistente, resultaría en error.
Para que esto no pase, tenemos que escribir una función anónima que crea el patrón, y enlazamos esta función como retrollamada ( callback ) al evento onload.
Veamos un ejemplo.
A continuación utilizamos una pequeña imagen como patrón para nuestro <canvas>. 
Creamos el patrón ( pattern ) utilizando el método createPattern() y asignamos su valor a la propiedad fillStyle(), para un relleno,
o a la propiedad strokeStyle() para dibular un borde.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
// crear un patrón de relleno desde una imagen
var patron = new Image();
patron.src = "images/pattern.png";
patron.onload = function() {
ctx.fillStyle = ctx.createPattern(patron,"repeat");
ctx.fillRect(50,50, canvas.width-100, canvas.height-100);
// crear un borde utilizando un patrón
ctx.strokeStyle = ctx.createPattern(patron,"repeat");
ctx.lineWidth = 20;
ctx.strokeRect(10,10, canvas.width-20, canvas.height-20);
}
}
}Crear un patrón desde otro canvas
También podemos crear patrones utilizando otro canvas en lugar de imagen.
Veamos un ejemplo.
Primero dibujamos en un pequeño canvas (id="patron" width="10" height="15") una línea oblicua. Esta será la imagen que se
repitirá para crear un patrón en el otro canvas (id="lienzo1" width="200" height="160").
En producción este puede ser un canvas virtual, creado con document.createElement("canvas") y que no aparece en el DOM.
var canvasP = document.getElementById("patron");
if (canvasP && canvasP.getContext) {
var ctxP = canvasP.getContext("2d");
if (ctxP) {
// creamos el patrón.
ctxP.lineWidth = 1;
ctxP.strokeStyle = "#ccc";
ctxP.beginPath();
ctxP.moveTo(canvasP.width, 0);
ctxP.lineTo(0, canvasP.height);
ctxP.stroke();
}
}
var canvas1 = document.getElementById("lienzo1");
if (canvas1 && canvas1.getContext) {
var ctx1 = canvas1.getContext("2d");
if (ctx1) {
ctx1.save();
// aplicamos el patrón
ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat");
ctx1.fillRect(0,0, canvas1.width, canvas1.height);
ctx1.restore();
ctx1.font="18px Arial";
ctx1.textAlign="center";
ctx1.textBaseline="middle";
ctx1.fillText("lienzo1", canvas1.width/2, canvas1.height/2);
}
}