Código diferente mas funciona também!

Bom, completando minha saga aqui no Logica II, venho mostrar meu código!

Ele faz o que a atividade propõe (talvez nao tenha o requinte do professor).

Optei por usar todos os ifs dentro da function lidaComMovimentoDoMouse para escolher a cor (já que essa funçao tá recebendo o X e Y do mouse) e também ja decidi que , se X e Y do mouse estiverem no X e Y da paleta de cores, a variavel desenha se torna false e, portanto, não haverá desenho!

Fica meu código para analise de vcs, companheiros!

<meta charset="UTF-8">
<canvas id='tela' width=600 height=400></canvas>

<script>

    function desenhaQuadrado(x,y,tamanho,cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x,y,tamanho,tamanho);
    }

    function desenhaCirculo(x,y,raio,cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2*Math.PI);
        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 < xVerde && y > yQuadrados && y < tamanhoQuadrados) {
            corAtual = 'red';
        }

        if(x >= xVerde && x < xAzul && y > yQuadrados && y < tamanhoQuadrados) {
            corAtual = 'green';
        }

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

        if(x >= xVermelho && x <= (xAzul + tamanhoQuadrados) && y > yQuadrados && y < tamanhoQuadrados) {
            desenha = false;
        }

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

    function habilitaDesenhar() {
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false;
    }

    var tela = document.getElementById('tela');
    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;

    </script>