[Duda] DUDA SOBRE EJERCICIO "DISEÑAR PALETA COLORES" -CLASE 5 LOGICA PROGR. PRAC. CON JUEGOS Y ANIMACIONES

Estimados compañeros. Al realizar la actividad consistente en "diseñar con una paleta de colores "de la clase 5 del curso "Logica de Programación: Practicando con Juegos y Animaciones" he acumulado varias dudas relacionadas con mi solución cuyo codigo seguidamente transcribo:

<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 colores = ["red", "green", "blue"];

    var colorElegido = "blue";

    var puedoDibujar = false;


    function paletaColores(){

        var coordX = 0; 

        var coordY = 0;

        var ancho = 50;

        var alto = 50;

        for(i = 0; i <  3; i++){

            pincel.fillStyle = colores[i];

            pincel.fillRect(coordX, coordY, ancho, alto);

            coordX = coordX + 50;

    }
}   


    function eligeColor(evento){

            var coorClickX = evento.pageX - pantalla.offsetLeft;

            var coordClickY = evento.pageY - pantalla.offsetTop;

            var ancho = 50;

            for(i = 0; i <  3; i++){

                if(coorClickX <= ancho && coordClickY <= ancho){

                    colorElegido = colores[i];

                    break;
                }
                else{
                    ancho = ancho + ancho;
        }
    }

    alert("color elegido:, " + colorElegido);
}



    function dibujarCirculo(evento) {

        paletaColores();

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

        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar(){


        puedoDibujar = true;

    }



    function deshabilitarDibujar() {

        puedoDibujar = false;

    }


    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = eligeColor;


</script>

1) Si en la linea siguiente a la 31, uso pincel.fill() el codigo no funciona ya que solo cambia de color la ultima circunferencia. 2) Deseo saber cual es la secuencia logica que permite que la funcion dibujarCirculo capture los datos del evento que se produce al hacer click con el boton izquierdo del mouse ya que en realidad la funcion viculada directamente con el evento "onmousedown" es la funcion habilitarDibujar y no dibujarCirculo. Lo que interpreto es que esta ultima funcion puede capturar los datos de dicho evento ya que esta sujeta a la condicion que "puedoDibujar" sea igual a true, pero no comprendo del todo como llegan los datos a la funcion dibujarCirculo a traves del su parámetro "evento". 3) En la consigna del ejercicio, entre otras cosas, se indica que "debemos restringir el área de la paleta para no poder diseñar nada encima de ella" pero cuando trato de cumplir con dicha consigna incorporando en la funcion "habilitarDibujar" una linea asi. "if(x > 150 && y > 50"){ puedoDibujar = true} el codigo no funciona y no comprendo la razon.

Esas son las dudas, agradeceré cualquier consideracion al respecto. Saludos!.