Inserindo botão apagar tudo

Oi Luis, meu aluno! Estou analisando seu código e já já posto aqui o que encontrei.

Então, futuro cangaceiro na programação. Primeiro vai a dica máxima: toda vez que seu código não funcionar como esperado você precisa dar uma olhadinha no console do Chrome (F12 - no Windows).

No Console do Chrome tenho a seguinte mensagem de erro quando executo seu código:

Uncaught TypeError: Cannot set property 'onclick' of null

Ele ainda indica a linha (omit aqui quando colei a mensagem).

Indo para essa linha, eu encontro a instrução

botao.onclick = apagaTudo;

Ela esta perfeita, mas o problema é que na hora que você busca o botão através de document.querySelector('button') a tag do<button> ainda não foi carregada na página. Basta subir a tag button para antes da tag script, assim:

<button>Apagar Tudo</button>

<canvas width="600" height="400">

<script>


    var tela = document.querySelector ("canvas");
    var pincel = tela.getContext ("2d");

    pincel.fillStyle = "grey";
    pincel.fillRect (0,0,600,400);

    function exibeAlerta(parametro){
        var x = parametro.pageX;
        var y = parametro.pageY;
        pincel.fillStyle = "red";
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();

    }

    tela.onclick = exibeAlerta;

    //button

    function apagaTudo (){
        pincel.fillStyle = "grey";
        pincel.fillRect(0,0,600,400);

    }

    var botao = document.querySelector("button");
    botao.onclick = apagaTudo;


</script>

</canvas>

Com isso, seu programa funcionará perfeitamente.

Lembre-se que você só pode buscar um elemento do mundo HTML via JavaScript se o elemento já tiver sido carregado na página.

Sucesso e bom estudo, meu aluno.

(removido)

Caramba! Era tão simples :(

Obrigado professor por essa ajuda. Vou prestar mais atenção na próxima.