Funciona, mas não como deveria.

Gabriel, acho que faltou então alguma condição para mostrar que só se deve desenhar o círculo com o botão esquerdo pressionado, que seria o comando onmousedown.

;)

Luiza eu realmente não consegui entender por conta própria como funciona onmousedown. Meu código agora funciona como o professor pediu, desenha o circulo apenas com o botão esquerdo, Mas não sei se posso dar a tarefa como concluída, pois fiz de um jeito bem diferente do professor além de não entender como ele fez. Foi mais fácil criar outra solução do que entender a do professor.

<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);

    function desenhaCirculo(evento) {
        var raio = 10

        if(evento.buttons == 2){
            raio = raio - 10
        }

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

    }

    tela.onmousemove = desenhaCirculo 


</script>

Gabriel eu não entendi bem a sua resolução rsrs O que significa esse evento.buttons?? confesso que não recordo!

if(evento.buttons == 2){
            raio = raio - 10
        }

        if(evento.buttons == 0){
            raio = raio - 10

Sobre a explicação do professor o que eu entendi foi o seguinte:

1) Ele declarou uma variável "desenha" sendo falsa 2) Ele fez um link entre a variável e a função com o if - ou seja, a função desenhaCirculo só funcionará se desenha == true 3) OBS: if(desenha) é igual dizer if(desenha==true) - versão encurtada 4) Dai ele coloca o movimento do mouse (onmousemove) recebendo a função desenhaCirculo - pois onmousemove identifica as coordenadas necessárias para desenhar a bolinha 5) Depois ele cria duas funções e as condições necessárias para cada uma delas funcionar:

• habilitaDesenhar tem o desenha = true - mais para baixo recebe o onmousedown -----> ou seja, se o botão esquerdo estiver pressionado, a variável desenha será verdadeira e como a função desenhaCirculo faz o círculo apenas quando a variável for verdadeira o círculo é desenhado.
• o mesmo raciocínio para a segunda função: a variável desenha será falsa para onmouseup, pois quando o lado esquerdo do mouse não estiver pressionado, não queremos que haja desenho de bolinha.

IMPORTANTE: o professor basicamente usou a variável desenha para entrelaçar todas essas possibilidades

Espero ter ajudado :)

Obrigado Luiza, agora sim eu entendi.

Dentro do tela.onmousemove já existe um parâmetro para o click do mouse, buttons. Ele responde 2 para o botão direito,1 para o botão esquerdo e 0 para nenhum botão.

Imagine! Fico feliz que pude ajudar :)

2 é =2 cliques no mouse para o botão direito? Ou é o número 2 mesmo?

o botão direito é o botão 2 do mouse. Ele tbm responde com 3 para o scroll quando pressionado, descobri com tentativa e erro.

muito engenhoso! não sabia :)