As imagens provenientes de arquivos gráficos podem ser criadas com nosso editor preferido e fazer facilmente gráficos bastante criativos e vistosos, ou editar a partir de fotos criadas com nossa câmara. A seguir podemos incluí-las no Canvas e assim conseguir que nossos trabalhos tenham uma qualidade melhor que se desenhássemos a mão com as funções Javascript do API de Canvas.
Com um pouco de criatividade e algo de código Javascript, poderemos fazer composições baseadas em várias imagens "coladas" na tela, ou utilizar imagens de fundo sobre as quais mais tarde pintamos com Javascript para destacar coisas. Como podemos usar qualquer tipo de arquivo gráfico, desde que esteja suportado pelo navegador, as possibilidades são enormes.
drawImage(objeto_imagem, x, y)
Enviamos três parâmetros, o primeiro é o objeto Javascript da imagem que se deseja incluir na tela. Os dois seguintes são as coordenadas onde situar a imagem, sendo (x,y) o ponto onde se colocará o canto superior esquerdo da imagem.
Como dizia, este método pertence ao objeto do canvas, e é por isso que antes de poder invocá-lo devemos ter obtido o contexto do canvas, tal como aprendemos anteriormente no Manual de Canvas para qualquer outro tipo de desenho.
Este objeto de imagem pode ser obtido de várias maneiras, mas no momento vamos aprender a gerá-lo dinamicamente com uma instrução Javascript.
var img = new Image();
Com isto temos uma variável chamada "img" que tem um objeto imagem dentro. Esse objeto imagem neste momento está sem nenhum atributo. Poderíamos dizer que está sem inicializar. A tarefa de inicialização fundamental seria atribuir uma rota a um arquivo gráfico.
img.src = 'logo-grande.jpg';
Isto faz com que no objeto Image se carregue a imagem que está no arquivo 'logo-grande.jpg' e como não especificamos nenhum diretório na rota, se supõe que esse arquivo está na mesma pasta que o arquivo HTML onde esteja esse código Javascript.
Uma vez t que tenhamos o objeto imagem, poderíamos pintá-lo em um canvas por meio da função drawImage(). Seria algo parecido a isto:
ctx.drawImage(img, 10, 10);
Porém atenção, porque este código tem um detalhe: a imagem não será desenhada no canvas a não ser que esteja previamente carregada no navegador.
Na sequência de instruções, tal como o temos agora:
var img = new Image();
img.src = 'logo-grande.jpg';
ctx.drawImage(img, 10, 10);
O navegador ao especificar o arquivo da imagem, atualizando o atributo src, tem que baixá-lo e isso leva um tempo. Portanto, se imediatamente após indicar o arquivo, tentamos desenhar a imagem, dará um problema. Dito de outra maneira, só podemos desenhar a imagem quando estamos seguros de que o navegador já fez o download. Para nos certificarmos deste ponto, só podemos usar o evento onload da imagem, para chamar a drawImage() quando a imagem terminou de ser carregada.
var img = new Image();
img.src = 'canvas-html5.png';
img.onload = function(){
ctx.drawImage(img, 10, 10);
}
<html>
<head>
<title>Imagens em Canvas</title>
<script language="javascript">
function carregarContextoCanvas(idCanvas){
var elemento = document.getElementById(idCanvas);
if(elemento && elemento.getContext){
var contexto = elemento.getContext('2d');
if(contexto){
return contexto;
}
}
return FALSE;
}
window.onload = function(){
//Recebemos o elemento canvas
var ctx = carregarContextoCanvas('meucanvas');
if(ctx){
//Crio uma imagem com um objeto Image de Javascript
var img = new Image();
//indico a URL da imagem
img.src = 'logo-criarweb.gif';
//defino o evento onload do objeto imagen
img.onload = function(){
//incluo a imagen no canvas
ctx.drawImage(img, 10, 10);
}
}
}
</script>
</head>
<body>
<canvas id="meucanvas" width="200" height="100">
Seu navegador não suporta canvas.
</canvas>
</body>
</html>
Podemos ver o exemplo em funcionamento em uma página à parte.
No artigo seguinte vamos mostrar diversas maneiras de acessar objetos Image a partir de Javascript para mostrar essas imagens no canvas.
 | FlashCanvas: elemento canvas compatível com todos os navegadores | Maneiras de acessar objetos Image para mostrar no canvas |  |
