Hola, el ejercicio lo estuve haciendo de una forma más simple, tratando de modificar lo menos posible el código original, sin declarar tantas variables/funciones como en la opinion del instructor y sin importar si dibuja por encima de las 3 paleta de colores. O sea, únicamente me interesaba lo de hacer click en la paleta de colores y cambie el color. Pero noto que la variable colorActual no se utiliza, siempre es azul el círculo, por más que declare desde el inicio con var colorActual = "red". Igual el evento de hacer click en el cuadrado rojo se que funciona porque la alerta se ve.

Me inetersa saber solo eso, ya que pude hacer que funcione de la manera correcta implementando lo que estaba en la opinión del instructor en mi código y me funcionó. O sea, haciendo que dibujarCirculo reciba (x, y, colorActual) y creando una funcion capturarMovimientoDelMouse. Pero quiero saber por qué no funcionó de mi manera.

<canvas width="600" height="400"></canvas>
<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var colorActual = "red";
    var puedoDibujar = false;

    function dibujarCirculo(evento, colorActual) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function disparar(evento){

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

        if ((x < 50) && 
            (y < 50) ) {
           colorActual = "red";
       alert("cambio a rojo")  ///solo hice el color rojo por ahora
        }
    }

        function dibujarCuadrado(x,y,colorCuadrado){
        pincel.fillStyle = colorCuadrado;
        pincel.fillRect(x,y,50,50); 
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);
    }

    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    dibujarCuadrado(0,0,"red");
    dibujarCuadrado(50,0,"green");
    dibujarCuadrado(100,0,"blue");
    pantalla.onclick = disparar;

</script>