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

Funções anônimas - Muito legal essa dica!

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

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

    var desenha = false;

  // atribuindo diretamente a função anônima
   tela.onmousemove = function(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousedown = function() {

        desenha = true;
    }

     tela.onmouseup = function() {

        desenha = false;
    }

</script>
1 resposta
solução!

Olá Juliana, tudo ok por aí?

Eu testei seu código e ele está funcionando muito bem!

Eu percebi que você mencionou as funções anônimas no titulo de seu tópico elogiando elas, e realmente as funções anônimas são muito importantes para entender alguns dos conceitos do funcionamento da linguagem JavaScript, são funções que não dependem de nomes, somente são declaradas e armazenadas em uma variável.

Contudo existem sim alguns casos onde elas irão atrapalhar mais do que ajudar visto que ao não terem um nome se você não tem muito conhecimento daquele projeto você pode acabar demorando muito para entender a função dela, e corre o risco de não entender ainda.

Mas em geral elas são uma boa opção de uso para casos como esse nosso de desenhar na tela.

Caso tenha alguma dúvida relacionada ao conteúdo recorra ao fórum!

Um abraço e bons estudos.