Canvas API: Preenchendo Formas com Imagens

Em vez de usar uma cor específica para preencher formas, como retângulos, podemos utilizar imagens. Para isso, o contexto do elemento canvas possui a função createPattern(), que aceita dois parâmetros: a imagem que será usada como fundo e o modo de repetição da imagem. O segundo parâmetro é relevante se o tamanho da imagem for menor que o tamanho da forma no canvas. Esse parâmetro pode ter os seguintes valores:

repeat: a imagem se repete para preencher todo o espaço da forma
repeat-x: a imagem se repete apenas na horizontal
repeat-y: a imagem se repete apenas na vertical
no-repeat: a imagem não se repete

Vamos desenhar um retângulo e exibir nele uma imagem:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo Canvas</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="250"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const img = new Image();
      img.src = "forest.png";

      img.onload = function () {
        const pattern = context.createPattern(img, "repeat");
        context.fillStyle = pattern;
        context.fillRect(10, 10, 200, 200);
        context.strokeRect(10, 10, 200, 200);
      };
    </script>
  </body>
</html>

Para usar uma imagem, é necessário criar um elemento Image e definir a origem da imagem: um arquivo local ou um recurso na internet:

const img = new Image();
img.src = "forest.png";

Neste exemplo, assume-se que o arquivo de imagem forest.png está na mesma pasta que o arquivo HTML. No entanto, o carregamento da imagem pode demorar um pouco, especialmente se o arquivo estiver hospedado na internet. Portanto, para garantir que a imagem já tenha sido carregada, todas as ações relacionadas a seu uso devem ser realizadas dentro do método img.onload, que é chamado quando o carregamento da imagem é concluído:

img.onload = function () {
  const pattern = context.createPattern(img, "repeat");
  context.fillStyle = pattern;
  context.fillRect(10, 10, 200, 200);
  context.strokeRect(10, 10, 200, 200);
};

O método createPattern() retorna um objeto que é definido como o estilo de preenchimento da forma: context.fillStyle = pattern;. O processo de desenhar o retângulo permanece o mesmo.

Imagem como fundo no Canvas em JavaScript