Mudando a cor e impondo limites

Eu ainda tenho um pouco de dificuldade de pensar nessa lógica mais trabalhada que utiliza dos valores que ja temos para criar as funções. Entendo que assim fica MUITO mais fácil alterar e entender o código e espero chegar lá um dia kk, por enquanto vou deixar como eu fiz aqui mesmo, usando os numeros mesmo, pensando nos tamanhos e tal.

E o limite eu deixei em x = 600 pra que não seja possivel desenhar em nenhuma parte da linha da paleta, porque achei mais bonitinho. Essa parte eu penei porque não sabia onde enfiar a função do limite ou como usa-la, mas o professor salvou nessa ai kk

</script><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(desenha && limiteDesenho(x,y)) {

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


    }



    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function trocaCor (evento) {   
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if ((x >= 0) && (x < 50) && (y >= 0) && (y <= 50)){
           corAtual = 'red';
        }

        if ((x >= 50) && (x < 100) && (y >= 0) && (y <= 50)){
            corAtual = 'green'
        }

        if ((x >= 100) && (x <= 150) && (y >= 0) && (y <= 50)){
            corAtual = 'blue'
        }

        if (x <= 600 && y <= 50){

        }
    }

   function limiteDesenho (x , y){

        if (x >= 0 
            && x < 600 
            && y >= 0 &&
            y < tamanhoQuadrados){
           return false;
        } else {
            return true;
        }
    }

    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(); 


    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = trocaCor;


</script>