esta a m dar erro, quero meter a bola por cima da imagem ao clicar por cima da umagem

<canvas width="800" height="600"></canvas> <img src="albirinto.jpg"> <script type="text/javascript"> var tela = document.querySelector ("img") var pincel = tela.getContext ( "2d" ) pincel.fillStyle = "black" pincel.fillRect(0,0,800,600) function mostra_mensagem() { pincel.fillStyle = "red" pincel.beginPath(); pincel.arc(300,200,60,0, 2*3.14) pincel.fill() } tela.onclick = mostra_mensagem; </script>

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;