[Projeto] Solução mais simples para o problema final

Olá, Gabriel! Tudo bom contigo?

Muito bacana saber que você elaborou uma outra solução para o problema! Pensar em novas alternativas é algo fundamental para o nosso aprendizado.

Uma dica para deixar seu código ainda mais legal é impedir que o usuário utilize o pincel sobre a paleta de cores. Para isso, podemos utilizar o seguinte trecho de código:

function permiteDesenho(x, y) {

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

A função acima recebe as posições x** e **y do pincel e retorna dois possíveis valores: true ou false, os quais permitirão ou não que o usuário pinte sobre a paleta.

Caso o usuário esteja sobre a paleta, é porque as condições abaixo são verdadeiras (e, consequentemente, o valor do return será false:

• O valor da posição x é maior ou igual a 0;
• O valor da posição x é inferior ao tamanho total da paleta (que é a união do comprimento dos três quadrados);
• O valor da posição y é maior ou igual a 0;
• O valor da posição y é inferior a altura da paleta (que é o mesmo tamanho do lado do quadrado).

Caso contrário, significa que o usuário não está sobre a paleta. Desse modo, o valor retornado pela função é true e o usuário tem permissão para fazer sua arte!

Para que a lógica acima funcione, é necessário alterar a condição que se encontra dentro da função lidaComMovimentoDoMouse():

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

Tal alteração faz com que o círculo somente seja desenhado quando a variável desenha for igual a true e o valor retornado pela função permiteDesenho também for true.

Ao fim, seu código ficará desta forma:

<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) {
        x = evento.pageX - tela.offsetLeft;
        y = evento.pageY - tela.offsetTop;

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

    function habilitaDesenhar() {
        desenha = true;
    }

    function desabilitaDesenhar() {
        desenha = false;
    }

    function trocaCorCirculo(evento) {
        x = evento.pageX - tela.offsetLeft;
        y = evento.pageY - tela.offsetTop;
        if((x > xVermelho) && (x < xVerde) && (y > yQuadrados) && (y < tamanhoQuadrados)) {
            corAtual = "red";
            return corAtual;
        } else if ((x > xVerde) && (x < xAzul) && (y > yQuadrados) && (y < tamanhoQuadrados)) {
            corAtual = "green";
            return corAtual;
        } else if ((x > xAzul) && (x < xAzulfim ) && (y > yQuadrados) && (y < tamanhoQuadrados)) {
            corAtual = "blue";
            return corAtual;
        }
    }

        // aqui está a nova função que desenvolvemos!
    function permiteDesenho(x, y) 
        if(x >= 0 && x < 3 * tamanhoQuadrados && 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 xAzulfim = 150;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;
    var x = 0;
    var y = 0;

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores
    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;
    tela.onclick = trocaCorCirculo;

</script>

Caso tenha dúvidas após minha explicação ou ao decorrer dos cursos, lembre-se que você pode contar com o fórum! Fico à disposição para te ajudar no que for preciso!

Até mais, Gabriel!