Imagens do Fundo - JavaScript

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