Os padrões de repetição ou patterns são muito utilizados no web design. HTML os têm e CSS, é claro, também. Todos nós já os teremos usado em muitas ocasiões, para conseguir a repetição de uma imagem que colocamos como fundo de uma página ou de qualquer outro elemento de uma web. O componente Canvas do HTML 5 também tem sua própria implementação dos padrões, com os quais podemos fazer facilmente um mosaico no que se repita constantemente uma imagem.

No Manual de Canvas já vimos como trabalhar com imagens, para conseguir que dentro de uma tela possa ser colocada uma imagem ou parte dela. Esses conhecimentos também nos servirão em grande medida para o trabalho com padrões.

Definir um padrão

Para definir um padrão utilizamos o método createPattern() que pertence ao contexto do canvas. Este método recebe dois parâmetros. O primeiro é a imagem que desejamos utilizar como padrão e o segundo é o tipo de repetição que queremos implementar.

A imagem que desejamos utilizar podemos tirá-la de um objeto Image de Javascript e o tipo de repetição é similar ao que se utiliza quando se define um fundo de imagem em CSS: "repeat" (para um mosaico que se repete tanto na horizontal quanto na vertical, "repeat-x" (para repetições na horizontal), "repeat-y" (para repetir a imagem na vertical) e "no-repeat", que não produzirá nenhuma repetição).

Uma vez que tenhamos definido um padrão, ainda temos metade do trabalho por diante. Esse padrão simplesmente estará declarado como objeto em Javascript e pronto para usar em um canvas, mas para isso devemos configurar o estilo de preenchimento e em seguida preencher de cor uma área.

var meuPadrao = ctx.createPattern(objeto_imagem, 'repeat');

Com a linha anterior teríamos criada uma variável meuPadrao que contem um padrão de imagem pronto para ser utilizado.

Configurar um padrão como estilo de preenchimento de cor

A propriedade fillStyle do contexto do canvas, que vimos ao falar da cor de preenchimento e de traçado em canvas, à parte de especificar a cor de preenchimento, indicar um padrão para utilizar para preencher uma área. Com isto, conseguiremos pintar uma área com um padrão ou mosaico de imagem, em lugar de uma cor plana.

ctx.fillStyle = meuPadrao;

Com isto conseguimos que, na próxima vez que se preencha de cor uma área, se faça com um mosaico de imagem ou pattern, em lugar de uma cor plana.

Preencher de cor uma área

Agora podemos preencher de cor qualquer área, que será preenchida com o padrão definido anteriormente. É tão simples quanto utilizar um método que nos permita aplicar cor, como fillRect(), visto também anteriormente.

ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

Com esta linha preencheríamos de cor toda a área disponível no elemento canvas, ou seja, um retângulo que vai desde a coordenada (0,0) até toda a largura e altura do canvas. Como previamente se aplicou o padrão à propriedade fillStyle, em vez de preencher com uma cor se preencherá com um mosaico de imagem.

Exemplo completo de preenchimento com um padrão definido por uma imagem

Para terminar colocamos o código de um exemplo que faz uso de uma imagem para criar o pattern.

window.onload = function(){
   //Recebemos o elemento canvas
   var ctx = cargaContextoCanvas('meucanvas');
   if(ctx){
      //Crio uma imagem com um objeto Image de Javascript
      var img = new Image();
      //indico a URL da imagem
      img.src = 'logo-desarrolloweb.gif';
      //defino o evento onload do objeto imagem
      img.onload = function(){
         //Crio um "pattern" no canvas
         var meuPadrao = ctx.createPattern(img, 'repeat');
         ctx.fillStyle = meuPadrao;
         ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
      }
   }
}

Este exemplo pode ser visto em uma página em funcionamento.

Como vimos, não há muito mistério no uso de padrões. É um pouco mais trabalhoso que colocar uma imagem no canvas, mas muito menos que se tivéssemos que escrever um script para realizar o mosaico "à mão".