Por que precisa da variável?

Oi Tainã, tudo bem?

Os eventos de mouse, como onmousedown, onmouseup, como o próprio nome já diz, são eventos. Ou seja, vão realizar alguma função quando forem acionados. Por exemplo, o onmousedown, vai realizar uma função quando o clique do mouse estiver pressionado, enquanto o onmouseup vai executar uma função quando liberarmos o clique do mouse.

Não entendi muito bem sua dúvida em relação a variáveis true/false. Quando um evento é acionado, uma função é dispada. Veja o exemplo a seguir:

tela.onmousedown = function() {
     console.log('Clique do mouse');
}

Veja que atribuímos uma função para o evento de mouse. E quando esse evento for disparado, a função será chamada e será printado na tela "Clique do mouse". Não precisamos utilizar if para verificar se um evento foi chamado ou não, é só atribuir o evento numa função, e essa função será executada quando o evento for realizado!

Espero ter ajudado, qualquer outra dúvida estou à disposição, bons estudos!

Na solução sugerida, utilizam uma variável false para poder determinar quando os eventos serão realizados. Mas isso não foi necessário no exercício anterior e eu não entendi bem por que foi agora. Eu consegui fazer desenhar quando arrasta mas estou tentando entender como colocar a condição de apenas com o botão apertado.

Então Tainã, a variável foi criada para determinar se o usuário pode ou não desenhar na tela. Caso o botão esteja pressionado (onmousedown), ele poderá desenhar, logo, criamos uma variável desenha e colocamos seu valor como true. Caso o botão não esteja pressionado (que é o evento onmouseup), ele não poderá desenhar, portanto setamos a variável desenha para false.

Se a variável desenha for true, ele pode desenhar normalmente quando o mouse é movimentado, nessa função aqui ele determina isso:

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

Portanto, os eventos são só uma forma de determinamos se o usuário pode ou não desenhar na tela. Deu pra entender?

Espero ter ajudado, abraços e bons estudos =)

Na verdade, não entendi. Porque no exercício anterior, de mudar a cor, não foi preciso colocar nenhum evento como true nem false para que realizasse a ação, só mesmo associar o evento a uma função. E agora, nesse caso, eu não entendi porque não posso colocar:

function desenhaCirculo(evento) {

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if(evento.onmousedown){
        pincel.fillStyle = 'blue';
                pincel.beginPath();
                pincel.arc(x, y, 10, 0, 2 * 3.14);
                pincel.fill();
    }
    else { evento.onmouseup = null;
    }

}

tela.onmousemove = desenhaCirculo;

Oi Tainã, obrigada por mandar o código, agora consigo visualizar melhor e entender o seu problema!

Então, o que acontece é o seguinte: você está atribuindo a função desenhaCirculo para o evento onmousemove. Portanto, o evento é exatamente esse: onmousemove. Agora dentro da função desenhaCirculo você está tentando chamar outros eventos a partir da variável evento, mas essa variável evento é reservada apenas para o evento onmousemove (com informações sobre esse evento), já que você chama a função desenhaCirculo por esse evento, por isso que não está funcionando, deu pra entender agora?

A melhor prática para esse exercício é a solução do professor, que baseado no estado de uma variável (a variável desenha no caso, que pode ser true/false), o usuário pode desenhar ou não.

Espero ter ajudado, abraços =)

Mil desculpas insistir, mesmo! Estou com bastante dificuldade nessa questão. Porque quando executamos o comando evento.shifKey no exercício anterior, não houve esse problema. Seria uma particularidade do onmousemove? No outro código estava:

function marcaTela(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;


        if(evento.shiftKey){

            raio = raio + 10
        }

            pincel.fillStyle = cor[cor1];
            pincel.beginPath();
            pincel.arc(x,y,raio,0,2*3.14);
            pincel.fill();

}

tela.onclick = marcaTela;

Tainã, não precisa pedir desculpas não! Estamos aqui justamente para ajudar, vamos lá!

O shiftKey na verdade não é um evento, e sim uma propriedade do evento, no caso do código que você acabou de enviar, o evento é o tela.onclick.

Então vamos lá: você chama a função marcaTela quando há o clique do mouse. Correto? E nessa função recebemos como parâmetro a variável 'evento', que vai obter informações do evento onclick, já que você chamou a função através desse evento.

Portanto, quando damos evento.shiftKey, estamos acessando uma propriedade desse evento, no caso, queremos saber se a tecla shiftKey está pressionada ou não (essa propriedade retorna verdadeiro ou falso)! Mas shiftKey não é um evento em si, que nem onmouseup, onmousedown, e assim por diante, por isso que você não consegue usar evento.onmousedown, ficou mais claro agora?

Não hesite em perguntar caso ainda haja dúvidas, eu quero resolver o seu problema =) Conte comigo, abraços!

agora entendi!!!

eu estava achando que shiftKey e o onmousedonw fossem equivalentes! e aí pra mim não fazia sentido que um funcionasse e outro não

mas agora entendi que o onmousedown é mais equivalente ao onclick, mesmo faz todo sentido

muito obrigada!! <3