[Projeto] Ficou um pouco diferente

Apesar de ter ficado um pouco diferente estou satisfeito de chegar numa solução.

<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)) {
            desenha = false;               
        }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 <= 50 && y <= 50){
            corAtual = 'red';
        }else if ((x > 50 && x <= 100) && y <= 50){
            corAtual = 'green';
        }else if ((x > 100 && x <= 150) && 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>

no caso ao invés de colocar uma nova função para proibir o desenho na paleta de cores, apenas lancei um expressão booleana com as coordenadas. fato que isso para um projeto maior, onde no futuro se incluiria mais cores seria problemático, porém depois de olhar a resposta fica tudo mais óbvio. Quanto a função de mudar de cor, acho que fica difícil encontrar outra solução, né .