Olá Manuel,
como o pincel irá pintar no canvas, precisamos desenhar a imagem dentro dele.
Um primeiro ajuste que precisa ser feito é que a variável tela terá que ser o canvas, não a imagem:
var tela = document.querySelector ("canvas")
Depois precisamos informar para o javascript que na hora em que a tela terminar de carregar a tela, ele precisa pegar esta sua img e desenhar uma cópia no canvas.
Para fazer isso, o pincel tem uma função chamada de drawImage que serve exatamente para desenhar uma img no canvas. Ele recebe 4 parâmetros, qual a imagem, a posição x e a y no canvas, o tamanho e a altura da imagem.
Só que para não ficarem duas imagens iguais na tela, também precisamos informar que a original tem que ficar escondida.
Para ter todo esse comportamento, podemos criar então uma função desenhaImagemassim:
function desenhaImagem() {
var img=document.querySelector("img"); //pega a imagem
pincel.drawImage(img, 0, 0, 800, 600); //desenha no canvas
img.style.visibility = 'hidden'; //esconde a img original
}
E para informar o js que ele deve executar esta função ao terminar de carregar a página, junto com o tela.onclick = mostra_mensagem; terá que adicionar o comando:
window.onload = desenhaImagem;
