[ Paleta de colores ] Ayuda para entender

Hola a todos. Realicé el programa de paleta de colores, ya funciona, pero no me queda claro porque...

1. ¿En qué momento se le asigna el efecto de cambiar color a la función de dibujarCirculo(evento, color) {...? (aquí le paso como parámetro el color y remplazo el "blue" predefinido) ¿Es porque el cambio de color viaja en el evento (el evento quedó definido en dibujarCirculo y seleccionarColor)?

2. Pregunta adicional ¿Si el color azul no está predefinido, porqué, antes de seleccionar color, se pinta de color azul?

Solo creo la paleta (function crearPaleta(x, y, base, altura, color) {... y la ejecuto para crear los tres cuadros) y la función para seleccionar color (seleccionarColor(evento){...) , lo único que ejecuto es el evento (pantalla.onclick = seleccionarColor;)

Gracias.

Este es el código original del ejercicio:

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

<script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 600, 400);


    var puedoDibujar = false;

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

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;

</script>

Lo que yo agregué:

 function crearPaleta(x, y, base, altura, color) {
    pincel.fillStyle = color;
    pincel.fillRect(x, y, base, altura);
}

crearPaleta(0, 0, 50, 50, "red");
crearPaleta(50, 0, 50, 50, "green");
crearPaleta(100, 0, 50, 50, "blue"); 


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

    if (x < 50 && x > 0 && y < 50 && y > 0) {
        crearPaleta(0, 0, 50, 50, "red");
        alert("Color rojo");
        pincel.fillStyle = "red";
        console.log("Color elegido: rojo");
        console.log(x, y);
    }

    if (x < 100 && x > 50 && y < 50 && y > 0) {
        pincel.fillStyle = "green";
        alert("Color verde");
        crearPaleta(50, 0, 50, 50, "green");
        console.log("Color elegido: verde");
        console.log(x, y);
    }

    if (x < 150 && x > 100 && y < 50 && y > 0) {
        crearPaleta(100, 0, 50, 50, "blue");
        alert("Color azul");
        pincel.fillStyle = "blue";
        console.log("Color elegido: azul");
        console.log(x, y);
    }
}

pantalla.onclick = seleccionarColor;