Outra forma de pensar a colisão de objetos

Na resolução do exercício, o professor colocou a colisão considerando de x = 0 até 3 vezes o tamanho do quadrado, isso até faz sentido, mas pensei que poderia causar estaticidade no código e problemas futuros quando quisesse mudar a posição da paleta no futuro. Desse modo usei outra lógica para a criação da colisão, e a testei mudando a posição da paleta; obtive o mesmo resultado. Além de que não pensei necessário criar outra função apenas para trocar de cor se já tenho algo relacionado ao clique do botão esquerdo do mouse, apenas adicionei um comando novo

<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 >= xVermelho) 
            && (x <= xVermelho + tamanhoQuadrados) 
            && (y >= yQuadrados)
            && (y <= yQuadrados + tamanhoQuadrados)) ||
               (    (x >= xVerde) 
            && (x <= xVerde + tamanhoQuadrados) 
            && (y >= yQuadrados)
            && (y <= yQuadrados + tamanhoQuadrados)) ||
               (   (x >= xAzul) 
            && (x <= xAzul + tamanhoQuadrados) 
            && (y >= yQuadrados)
            && (y <= yQuadrados + tamanhoQuadrados)) ) {
        } else if(desenha) {
            desenhaCirculo(x, y, 5, corAtual[passoDaCor]);
        }
    }

    function habilitaDesenhar(e) {
        var x;
        var y;
        x = e.pageX - tela.offsetLeft;
        y = e.pageY - tela.offsetTop;
        if (   (x > xVermelho) 
            && (x < xVermelho + tamanhoQuadrados) 
            && (y > yQuadrados)
            && (y < yQuadrados + tamanhoQuadrados)) {
            passoDaCor = 0;
        }
        if (   (x > xVerde) 
            && (x < xVerde + tamanhoQuadrados) 
            && (y > yQuadrados)
            && (y < yQuadrados + tamanhoQuadrados)) {
            passoDaCor = 1;
        }
        if (   (x > xAzul) 
            && (x < xAzul + tamanhoQuadrados) 
            && (y > yQuadrados)
            && (y < yQuadrados + tamanhoQuadrados)) {
            passoDaCor = 2;
        }

        desenha = true;


    }

    function desabilitaDesenhar() {

        desenha = false;
    }

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

    var passoDaCor = 0
    var desenha = false;
    var corAtual = ["red", "green", "blue"];
    var xVermelho = 50;
    var xVerde  = 100;
    var xAzul = 150;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;

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

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>