Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Me ajudem com essa função

Olá, tudo bem ? Bom, fiquei um tempo fora e durante esse tempo não consegui praticar nada, agora estava tentado realizar esse exercicio, porém estava errando em uma função, algum aluno/professor poderia me dizer qual a diferença entre os dois códigos (o erro estava no tela.onclick).

ERRADO :

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

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle="grey";
    pincel.fillRect(0,0,600,400);

    function CirculoClique(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = "orange";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2*3.14);
        pincel.fill();
    }

    tela.onclick = CirculoClique();
</script>

CORRETO:

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

<script>
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle="grey";
    pincel.fillRect(0,0,600,400);

    function CirculoClique(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = "orange";
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2*3.14);
        pincel.fill();
    }

    tela.onclick = CirculoClique;
</script>
1 resposta
solução!

Olá, Daniel!

Vamos destacar a pequena diferença entre os códigos.

O errado:

tela.onclick = CirculoClique();

O correto:

tela.onclick = CirculoClique;

A única diferença entre os código é que, no primeiro código, o errado, você chamou a função com o ().

Quando você chama a função, você obtem o retorno dela. Só que na função CirculoClique não há retorno! Em JavaScript, isso é o undefined

Então, você acabou pegando o undefined e jogando no tela.onclick. Ou seja, quando você clicar ele não faz nada!

Já no segundo código, o correto, você não chamou a função. Você passou a própria função! Passar o nome da função é a própria função, com todo o código dela.

Então, nesse segundo código, você associou o tela.onclick ao código da função CirculoClique . Quando você clicar, aquele código vai ser executado!