Corrigindo um problema do código original da "Opinião do instrutor"

O código original da "Opinião do instrutor" funcionava, porém tinha um problema chato. Para reproduzir o problema:

• Comece a desenhar normalmente (onmousedown);
• Mova o cursor para FORA do canvas, mantendo o botão pressionado (onmousedown);
• Enquanto o cursor estiver fora do canvas, solte o botão do mouse (onmouseup);
• Mova o cursor para dentro do canvas novamente;

Ao fazer estes passos, notamos que o cursor continua desenhando, mesmo que o botão do mouse não esteja pressionado.

Para corrigir o problema, criei uma outra variável chamada "documento", que recebeu o valor "document". Nós não vimos isso em específico na aula, mas interpretei que se podemos escrever no documento HTML usando document.write, e se podemos pegar uma tag HTML do documento usando document.querySelector, provavelmente eu poderia pegar informações "gerais" do documento usando apenas "document"... e bingo! Funcionou. :) Não sei se isso é recomendado, maaas... Outra coisa que fiz foi chamar a função para mudar cor por dentro da função "habilitaDesenhar". Com isso, posso apenas clicar dentro da cor que desejo e já sair desenhando, o que me faz economizar 1 clique do mouse. :P

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>

    function desenhaQuadrado(x, y, tamanho, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }

    function desenhaPaletaDeCores() {
        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, "red");
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, "green");
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, "blue");
    }

    function lidaComMovimentoDoMouse(evento) {
            x = evento.pageX - tela.offsetLeft;
            y = evento.pageY - tela.offsetTop;
            evitaColisao();
               if(desenha && !colisao) {
                desenhaCirculo(x, y, raio, corAtual);
               }
        }

    function habilitaDesenhar() {
        desenha = true;
        mudaCor();
    }

    function desabilitaDesenhar() {
        desenha = false;
    }

    function mudaCor() {
        if(y <= tamanhoQuadrados
            && x <= (xVermelho + tamanhoQuadrados)) {
            corAtual = "red";
        } else if(y <= tamanhoQuadrados
            && x <= (xVerde + tamanhoQuadrados)) {
            corAtual = "green";
        } else if(y <= tamanhoQuadrados
            && x <= (xAzul + tamanhoQuadrados)) {
            corAtual = "blue";
        }
    }

    function evitaColisao() {
        if(y < (tamanhoQuadrados + raio)
            && x < (xAzul + tamanhoQuadrados + raio)) {
            colisao = true;
        } else {
            colisao = false;
        }
    }

    function aoSairDaCanvas(evento) {
        xDoc = evento.pageX - tela.offsetLeft;
        yDoc = evento.pageY - tela.offsetTop;
        if(xDoc > (600 + raio)
            || xDoc < (tela.offsetLeft - raio)
            || yDoc > (400 + raio)
            || yDoc < (tela.offsetTop - raio)) {
            foraDoCanvas = true;
        } else {
            foraDoCanvas = false;
        }
    }

    var tela = document.querySelector("canvas");
    var documento = document;
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);
    var desenha = false;
    var colisao = false;
    var foraDoCanvas = true;
    var corAtual = "blue";
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;
    var x;
    var y;
    var xDoc;
    var yDoc;
    var raio = 5;
    desenhaPaletaDeCores();
    tela.onmousemove = lidaComMovimentoDoMouse;
    documento.onmousemove = aoSairDaCanvas;
    documento.onmousedown = habilitaDesenhar;
    documento.onmouseup = desabilitaDesenhar;
</script>