Segurando o clique fora do canvas

Germano,

bela ideia tentar bloquear este efeito indesejado (pointerlock). Sua borda previne este problema, mas quando você ultrapassa os limites externos da borda, o problema volta a ocorrer. Poderia fazer uma borda até os limites da tela, talvez resolvesse este problema.

Já tinha desistido de descobrir uma maneira de evitar esse efeito. Mas sua problematização (valeu!) me instigou novamente a procurar uma solução mais definitiva: com o evento onmouseout, o navegador identifica quando o mouse sai do canvas. E desabilita o "desenhar", sendo necessário fazer onmousedown de novo pra voltar a desenhar. Experimente!

Modifiquei o código com instruções que não sei se já viu nas aulas, mas se quiser implementar no seu código, basta inserir uma function e a chamada dela, abaixo. O resto é compatível. Ah, e aí pode eliminar a borda branca.

function mouseFantasma(){
    desenha = false;
}

tela.onmouseout = mouseFantasma;

Bons estudos!

Abaixo o meu código completo:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var cores = ["#ff7605", "hsl(319, 94%, 50%)", "rgb(87, 130, 224)", "hsl(110, 62%, 66%)"];
    var corAtual = cores[3];
    var xCores = [0, 40, 80, 120];
    var yCores = 0;
    var tamanhoQuadrados = 40;
    var raio = 4;


    function desenhaPaletaDeCores() {

        for(i = 0; i < cores.length; i++){
            desenhaQuadrado(xCores[i], yCores, tamanhoQuadrados, cores[i]);
        }
    }


    function desenhaQuadrado(x, y, tamanho, cor) {

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


       function podeDesenharNaArea(x, y) {

        if(x >= 0 && x < cores.length * tamanhoQuadrados + raio + 1 && y >= 0 && y < tamanhoQuadrados + raio + 1){
            return false;

        }else{
            return true;
        }

    }


    function selecionaCor(evento) {

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

        if(y > yCores && y < yCores + tamanhoQuadrados){

            for(j = 0; j < cores.length; j++){
                if(x > xCores[j] && x < xCores[j] + tamanhoQuadrados){
                    corAtual = cores[j];       
                }
            }
        }
    }


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

    }


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


    function habilitaDesenhar() {
        desenha = true;
    }


    function desabilitaDesenhar() {
        desenha = false;
    }


    function mouseFantasma(){
        desenha = false;
    }


    desenhaPaletaDeCores();
    tela.onclick = selecionaCor;
    tela.onmousemove = lidaComMovimentoDoMouse;
    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;
    tela.onmouseout = mouseFantasma;

</script>

Muito bom! funcionou perfeitamente acrescentar onmouseout, nao conhecia esse comando, estava tentando colocar onmouseup se o mouse ficasse fora do canvas, agora esta perfeito!