Mi código, Diseñando con el mouse. | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Mi código quedó así:

<meta charset = "utf-8">
<html>
    <head>
    </head>
    <body>
    <canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var color;

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var puedoDibujar = false;

//----- Función para escribir texto en un canvas
    function escribirTexto(x , y, color, texto) {
        pincel.font='12px Georgia';
        pincel.fillStyle=color;
        pincel.fillText(texto, x, y);    
    }//----

//----- Función para dibujar los cuadros de la paleta
    function dibujarcuadro(color,x,y) {
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.fillRect(x,y,50,50);
    }

//----- Función para dibujar el circulo con el color asignado al hacer clic izquierdo del mouse
    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        escribirTexto(0,380,'grey','███████████');
        escribirTexto(0,380,'black',x+' '+y);
        if(puedoDibujar && x>=0 && y>=55) {
            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

//----- Función para habilitar el dibujado
    function habilitarDibujar(evento) {
        puedoDibujar = true;

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

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

        if (x>=50 && x<=100){
            if (y>=0 && y<=50){
                color = 'green';
                puedoDibujar = false;
            }
        }

        if (x>=100 && x<=150){
            if (y>=0 && y<=50){
                color = 'yellow';
                puedoDibujar = false;
            }
        }
        escribirTexto(0,350,'black','Click');
        escribirTexto(0,300,'grey','███████████');
        escribirTexto(0,300,color,color);
    }

//----- Función para deshabilitar el dibujado
    function deshabilitarDibujar() {
        puedoDibujar = false;
        escribirTexto(0,350,'grey','███████████');
    }

//----- Dibujamos los cuadros de la paleta
    dibujarcuadro('red',0,0);
    dibujarcuadro('green',50,0);
    dibujarcuadro('yellow',100,0);

//----- Eventos del mouse sobre nuestro canvas
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    pantalla.onmousemove = dibujarCirculo;

</script>
</body>
</html>

Lo unico que me falto validar bien, la zona de dibujado. Ya que evité que dibujara sobre la parte la paleta, pero hay una seccion (en gris) donde si debería poder dibujar, intenté condicionarlo con:

if (puedoDibujar && !x>=0 && !x<=150 && !y>=0 && !y=50)

Si puedoDibujar es verdadero Y "X" no está entre 0 y 150 "Y" no está entre 0 y 50 ... dibuja.

Pero no pude validarlo, creo que necesito mejorar la lógica en ese aspecto, aunque no me gusta generar mucho código.

Ya corregí el error, tuve que areglar la logica para validar que no estuviera en el área de la paleta.

//----- Función para dibujar el circulo con el color asignado al hacer clic izquierdo del mouse
    function dibujarCirculo(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        escribirTexto(0,380,'grey','███████████');
        escribirTexto(0,380,'black',x+' '+y);
        if (!(x>=0 && x<=155 && y>=0 && y<=55)) { // Si NO esta en el área de la paleta
            if (puedoDibujar) {
                pincel.fillStyle = color;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
        }
    }

Pude dar con la solución al "negar" la condicion usando (!) adecuadamente.

Estaba usando:

        if (!(x>=0 && x<=155) && !(y>=0 && y<=55))

Lo que no permitía hacer la validación del área especifica, sino que validaba por separado... aunque habia un && en medio de las dos coordenadas.