Além das linhas: desenhando imagens no canvas - Parte 1 - O básico

Nos posts anteriores aprendemos como desenhar no canvas usando os variados métodos disponíveis. Hoje vamos um pouco mais além: vamos recuperar uma imagem e desenhá-la no canvas.

A classe Image

O Javascript dispõe de uma classe nativa para manipulação de imagens chamada Image. Instanciar uma imagem é moleza:

var img = new Image();

E, depois, altere a propriedade .src para o endereço da sua imagem:

img.src = 'endereco-da-imagem.ext';

Fácil assim.

Desenhar essa imagem no canvas também é bastante tranquilo (considerando que o canvas foi carregado na variável "context"):

context.drawImage(img, posicaoX, posicaoY, largura, altura);

Segue o código completo:

var context = document.getElementById('output').getContext('2d');
var img = new Image();
img.src = 'pulga.jpg';
context.drawImage(img, 30, 30, 96, 97);

Daí você percebe que a imagem não foi carregada. Isso acontece porque o Javascript tentou desenhar a imagem ANTES de conseguir carregá-la. Precisamos alterar um pouco o nosso código para que a imagem só seja desenhada depois que for carregada. Vamos usar a propriedade .onload da imagem:

var context = document.getElementById('output').getContext('2d');
var img = new Image();
img.src = 'pulga.jpg';
img.onload = function() {
  context.drawImage(img, 30, 30, 96, 97);
}

Agora sim. Confira o resultado.

A propriedade .onload também está disponível no contexto do navegador. Ao invés de usar img.onload, dependendo da necessidade, você também pode usar window.onload.

A minha imagem tem 96 pixels de largura e 97 de altura. Se for necessário, posso reduzir ou ampliar a imagem alterando os valores de largura e altura:

context.drawImage(img, 30, 30, 48, 48.5); //Metade do tamanho

Por hoje é só. Até breve!