Canvas API: Trabalhando com Imagens

Anteriormente, já discutimos a utilização de imagens como fundo de formas, mas também podemos exibir imagens separadamente no canvas. Para isso, o contexto do canvas utiliza o método drawImage(). Esse método possui três versões:

context.drawImage(image, x, y)
Aqui, o parâmetro image especifica a imagem a ser exibida, enquanto os parâmetros x e y definem as coordenadas do canto superior esquerdo da imagem.
context.drawImage(image, x, y, width, height)
Essa versão adiciona os parâmetros width e height, que permitem definir a largura e a altura da imagem a ser exibida.
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
Nessa versão, os parâmetros sx e sy representam as coordenadas na imagem de onde começará o recorte. Os parâmetros sWidth e sHeight definem, respectivamente, a largura e a altura do recorte em relação às coordenadas sx e sy.
Os parâmetros dx e dy indicam as coordenadas onde a imagem recortada será desenhada no canvas, enquanto dWidth e dHeight especificam a largura e a altura da imagem no canvas.

Por exemplo, vamos utilizar a primeira versão do método para exibir uma imagem:

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

Exemplo de exibição de imagem no canvas em JavaScript

Mais uma vez, ao exibir uma imagem, precisamos garantir que a imagem já foi carregada pelo navegador e está pronta para uso. Por isso, o método de desenho da imagem é colocado no manipulador de evento img.onload.

A segunda versão do método drawImage() permite definir a largura e a altura da imagem exibida, o que pode ser utilizado para escalonar a imagem:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest.png";
img.onload = () => {
  context.drawImage(img, 10, 10, 180, 150);
  context.drawImage(img, 200, 10, 180, 150);
};

Exibindo duas imagens no canvas em JavaScript com o método drawImage

Também podemos aplicar a terceira forma do método drawImage():

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest.png";
img.onload = () => context.drawImage(img, 0, 100, 300, 200, 20, 30, 300, 200);

Configurando exibição de imagem no canvas em JavaScript

Capturando Imagens de Outros Elementos

Uma das funcionalidades mais interessantes do elemento canvas é a capacidade de capturar uma imagem de outro elemento, como um elemento de vídeo ou outro canvas. Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Exemplo Canvas</title>
  </head>
  <body>
    <video id="myVideo" src="flower.webm" width="300" height="200" controls></video>
    <canvas id="canvas" width="300" height="200" style="background-color: #eee; border: 1px solid #ccc"></canvas>
    <div><button id="snap">Capturar Imagem</button></div>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const video = document.getElementById("myVideo");
      document.getElementById("snap").onclick = () => context.drawImage(video, 0, 0, 300, 200);
    </script>
  </body>
</html>

Capturando imagem de vídeo no canvas em JavaScript

Ao clicar no botão, o canvas capturará o quadro atual do vídeo sendo reproduzido e o fixará como uma imagem. Nesse caso, o método drawImage recebe como primeiro parâmetro o próprio elemento que está sendo usado como fonte da imagem.