[Dúvida] Dúvidas no comando | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Minha ideia era habilitar e desabilitar o desenho na area das paletas nesta função (function lidaComMovimentoDoMouse(evento)) , mas fiquei na dúvida na hora de programar e deixei em branco a condição do IF ( tipo: não faça nada), acabou dando certo! Mas é assim mesmo ou tive sorte?

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

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


        if ( ( x >  0) &&
             ( x <  150) &&
             ( y >  0)  &&
             ( y <  50)  ){ }



        else if (desenha) {

             desenhaCirculo(x, y, 5, corAtual);

        }
    }

    function habilitaDesenhar() {



            desenha = true;
        }




    function desabilitaDesenhar() {

        desenha = false;
    }


    function mudaCor(evento) {

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

        if((x > 0)
            && (x < 50)
            && (y > 0)
            && (y < 50)) {

            corAtual = "red";}

         else if ((x > 51)
            && (x < 100)
            && (y > 0)
            && (y < 50)) {

            corAtual = "green";}

        else if ((x > 101)
            && (x < 150)
            && (y > 0)
            && (y < 50)) {

            corAtual = "blue";}

    }


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

    var desenha = false;
    var corAtual = 'blue';
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;



    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = mudaCor;


</script>

Olá Dev, tudo certo?

Primeiramente gostaria de parabenizar pelo seu código, ficou show!

Na programação temos diversas formas de chegarmos a um mesmo resultado, sendo assim meus parabéns por ter desenvolvido do seu próprio jeito.

Uma outra forma de solução poderia ser utilizando uma função específica para limitar o desenho dos quadrados, dessa forma aplicamos ela como uma condição dentro da função do mouse:

//Função que limita o desenho
function podeDesenharNaArea(x, y) {
        //Limitamos onde podemos desenhar com base no tamanho dos quadrados
        if(x >= 0 && x < 3*tamanhoQuadrados && y >= 0 && y < tamanhoQuadrados) {
            return false;
        } else {
            return true;
        }

    }

function lidaComMovimentoDoMouse(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        //Somente desenhará se a a condição for atendida:
        if(desenha && podeDesenharNaArea(x,y)){

            desenhaCirculo(x, y, 5, corAtual);
        }
    }

Caso surja alguma dúvida estamos à disposição, conte conosco!

Um bom dia e bons estudos.