Dúvidas conceituais de navegador x executar a função

Márcia,

entendo o porque da confusão sobre a ordem das coisas, neste caso específico deste código. De uma forma simplificada, você pode entender da seguinte maneira:

O código tem que ser escrito na ordem correta; o navegador lê o seu código na ordem que você o escreveu.

Depois o navegador renderiza o código em tela, ou seja, ele leu na ordem, mas apresenta de uma forma que é, neste caso, dependente dos 3 eventos que são colocados (mousemove, mouse down e mouse up).

Quando estes eventos ocorrem, o navegador realiza a ação que foi designada no código, o que fica de certa forma independente da ordem das instruções, mas dependente dos eventos.

Note que neste código, se você só clicar, sem mover o mouse nada acontece. Porque a function desenhaCirculo depende do movimento do mouse. Se desenhaCirculo não está sendo invocado pelo movimento do mouse, a variável desenha = true que ocorre quando há o evento mousedown não faz nada.

Só de curiosidade, você pode alterar a posição dos evento.pageX e Y para fora do if, e assim acionando o console vai poder ver com clareza o evento de mousemove sendo invocado o tempo inteiro em que o mouse se movimenta. Mas a pintura só ocorre quando o evento mousedown ocorre também.

Neste sentido, a ordem das instruções é seguida, ou seja, o código só "faz algo" se desenhaCirculo estiver ocorrendo e mousedown também. Mas os eventos não precisam ocorrer na ordem designada no código. Ele já foi interpretado pelo navegador, e este vai seguir os comandos dos eventos.

<canvas width="600" height="400"></canvas>
selecione a cor <input type="color">

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

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

    var desenha = false;

    function desenhaCirculo(evento) {

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

        if(desenha) {
            pincel.fillStyle = paleta.value; // sempre pega o valor atual da paleta!
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

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

        desenha = true;
    }

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

        desenha = false;
    }

</script>