Coloquei as novas utilidades dentro das outras funções

Olá pessoal! Tudo bem? Para impedir que o desenho seja feito em áreas indesejadas, criei um if que desabilita "desenhar" diretamente na função "lidaComMovimentoDoMouse". E para as cores, troquei a função "habilitaDesenhar" por uma "botãoEsquerdo", e agora ela é responsável por trocar a cor dependendo do x e do y do mouse. (declarei as variáveis x e y fora das funções, como vazias, elas são definidas na função "lidaComMovimentoDoMouse". Minha resolução ficou um pouco diferente, gostaria de saber se é melhor fazer assim, ou se é melhor criar novas funções, para deixar o código mais claro.

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

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

            if( x < (150 + raio) && y < (50 + raio)) {
              desenha = false;
            }

            if(desenha) {    
                desenhaCirculo(x, y, raio, corAtual);
            }
        }

        function botaoEsquerdo() {

            desenha = true;

            if (y < (yQuadrados + tamanhoQuadrados)) {

              if ( x < (xVermelho + tamanhoQuadrados)) {
                corAtual = 'red';
              }

              if (x < (xVerde + tamanhoQuadrados) && x > (xVermelho + tamanhoQuadrados)){
                corAtual = 'green';
              }

              if (x < (xAzul + tamanhoQuadrados) && x >(xVerde + tamanhoQuadrados)) {
                corAtual = 'blue';
              }
            }
          }

        function desabilitaDesenhar() {

            desenha = false;
        }

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

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

        desenhaPaletaDeCores();

        tela.onmousemove = lidaComMovimentoDoMouse;

        tela.onmousedown = botaoEsquerdo;

        tela.onmouseup = desabilitaDesenhar;

    </script>