Mi código de la pizarra con paleta de colores.

Hola compañeros. Comparto mi desarrollo de la pizarra con paleta de colores que permite cambiar el color al dar click en el color de la paleta. Nuevamente mi desarrollo fue muy diferente al del profesor pero creo que logré el mismo resultado. Me pregunto si como desarrollo mi lógica para solucionar los problemas es algo normal o adecuado para mi proceso de aprendizaje. Me gustaría que alguien pudiera darme su punto de vista. Un cordial saludo a todos.

<canvas width="600" height="400"></canvas>

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

    var color = "blue"; // variable que va a guardar el color de la paleta de colores.

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

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 0, 50, 50);

    pincel.fillStyle = 'green';
    pincel.fillRect(50, 0, 50, 50);

    pincel.fillStyle = 'blue';      
    pincel.fillRect(100, 0, 50, 50);

    pincel

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if (puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            if ((x - pantalla.offsetLeft + 4 > 0)   &&                   //Condición que impide que se dibujen círculos en la tabla de colores. 
                (y - pantalla.offsetTop  + 4 > 50)  ||                      //No entendí por qué tuve que sumarle  4 para que no dibujara sobre la paleta si el radio era 5. 
                (x - pantalla.offsetLeft + 4 > 150) &&                //Cuando ponía 5, dibujaba sobre la paleta, así que dejé 4.
                (y - pantalla.offsetTop  + 4 > 0)   ||
                (x - pantalla.offsetLeft + 4 > 150) &&
                (y - pantalla.offsetTop  + 4 > 50)) {
                pincel.fillStyle = color;                                                //recibe color de la función paleta. inicia en blue porque es el valor precargado en la variable.
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function paletaColorClick(evento,) {                 //Esta fue mi lógica para definir el cambio de color cuando se daba click a la paleta de colores.

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

        if (x > 0 && x < 50 && y > 0 && y < 50) {
            color = pincel.fillStyle = "red";
        }
        if (x > 50 && x < 100 && y > 0 && y < 50) {
            color = pincel.fillStyle = "green";
        }
        if (x > 100 && x < 150 && y > 0 && y < 50) {
            color = pincel.fillStyle = "blue";
        }

    };

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = paletaColorClick;


</script>