Mi solución al ultimo ejercicio

No podía dormir hasta lograrlo, les dejo mi código, siento que es muy extenso, definitivamente me falta afinar mucho y sobretodo en cuestión a las buenas practicas, cualquier comentario y/o ayuda se agradece :)

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

    <script>
        let pantalla = document.querySelector('canvas');
        let pincel = pantalla.getContext('2d');
        let inicioXY = 0;
        let longitud = 50;

        let inicioRojo = 0; 
        let finRojo = inicioRojo + longitud; //fin color rojo (50) 
        let inicioVerde = finRojo + 1  ; // (51) se le agrega uno para no sobreescribir el pixel
        let finVerde = inicioVerde + longitud; // fin color verde (101)
        let inicioAzul = finVerde + 1; // (102)
        let finAzul = inicioAzul + longitud;  // (152)

        let indiceActual = 2;  //color azul de inicio
        let paletaColores = ["red","green","blue"]

        let puedoDibujar = false;

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

        function dibujarCuadro(indice, xInicio, yInicio, longitud){

            pincel.fillStyle = paletaColores[indice];
            pincel.fillRect(xInicio,yInicio,longitud,longitud);

        }

        function crearCuadros(){
            dibujarCuadro(0, inicioRojo, inicioXY, longitud, longitud); //la longitud es la misma para todos (50)
            dibujarCuadro(1, inicioVerde, inicioXY, longitud, longitud);
            dibujarCuadro(2, inicioAzul, inicioXY, longitud, longitud);

        }

        function elegirPaleta(eventoElegir){

            let cordX = eventoElegir.pageX - pantalla.offsetLeft;
            let cordY = eventoElegir.pageY - pantalla.offsetTop;

            if ((cordX >= inicioRojo && cordX <= finRojo) && 
                (cordY >= inicioXY && cordY <= longitud)) {
                cambiarColor(0); //cambia a color rojo
                console.log(paletaColores[indiceActual]); //consola muestra el color actualizado
            }

            else if ((cordX >= inicioVerde && cordX <= finVerde) && 
                     (cordY >= inicioXY && cordY <= longitud)){
                cambiarColor(1); //cambia a color verde
                console.log(paletaColores[indiceActual]); //consola muestra el color actualizado

            }

            else if ((cordX >= inicioAzul && cordX <= finAzul) && 
                     (cordY >= inicioXY && cordY <= longitud)){
                cambiarColor(2); //cambia a color azul
                console.log(paletaColores[indiceActual]); //consola muestra el color actualizado

            }
        }

        function cambiarColor(indice){
            return indiceActual = indice;
        }

        function dibujarCirculo(eventoDibujar) {

            if(puedoDibujar) {

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

                if((x >= inicioXY && x < (finAzul + 5)) && 
                    (y >= inicioXY && y < (longitud + 5))){
                    /* si entra dentro de la zona "prohibida, no dibuja nada */
                    console.log("Zona actual: ( " + x + ", " + y); //consola muestra coordenadas en zona "prohibida"
                }
                else {
                    pincel.fillStyle = paletaColores[indiceActual];
                    pincel.beginPath();
                    pincel.arc(x, y, 5, 0, 2 * 3.14);
                    pincel.fill();
                }
            }

        }

        function habilitarDibujar() {
           puedoDibujar = true;

        }

        function deshabilitarDibujar() {
            puedoDibujar = false;
        }

         crearCuadros();

        pantalla.onmousemove = dibujarCirculo;

        pantalla.onclick = elegirPaleta;

        pantalla.onmousedown = habilitarDibujar;

        pantalla.onmouseup = deshabilitarDibujar;