comparto mi codigo despues de mucho pensar

comparto mi codigo, admito que el desafio estuvo algo diificil pero espero que con el transcurrir de los demas cursos vayamos mecanizando todas las funciones

<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 puedoDibujar = false;

    //array para paleta de colores con su indice de posicion iniciado en 0
    var color = ["red", "green", "yellow"];
    var coloractual = 0;

    // Se dibujan los rectángulos de la paleta de colores

    pincel.fillStyle = color[0];
    pincel.beginPath();
    pincel.rect(10, 10, 50, 50);
    pincel.fill();

    pincel.fillStyle = color[1];
    pincel.beginPath();
    pincel.rect(60, 10, 50, 50);
    pincel.fill();

    pincel.fillStyle = color[2];
    pincel.beginPath();
    pincel.rect(110, 10, 50, 50);
    pincel.fill();

    pantalla.addEventListener("click", function(evento) {
        var x = evento.pageX - pantalla.offsetLeft; // Obtenemos la posición horizontal del clic
        var y = evento.pageY - pantalla.offsetTop; // Obtenemos la posición vertical del clic

        // Si el clic está dentro del primer rectángulo de la paleta, se selecciona el primer color rojo
        if (y >= 10 && y <= 60 && x >= 10 && x <= 60) {
            coloractual = [0];

            // Si el clic está dentro del segundo rectángulo de la paleta, se selecciona el  color dos
        } else if (y >= 10 && y <= 60 && x >= 60 && x <= 110) {
            coloractual = [1]

            // Si el clic está dentro del tercer rectángulo de la paleta, se selecciona el tercer color
        } else if (y >= 10 && y <= 60 && x >= 110 && x <= 160) {
            coloractual = [2]
        }


    })

    function dibujarCirculo(evento) {

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

            // Se utiliza otro condicional para verificar si el mouse está fuera de la paleta de colores para evitar dibujar círculos en esa área, con el operador logico de negacion !

            if (!(y >= 0 && y <= 70 && x >= 0 && x <= 170)) {
                pincel.fillStyle = color[coloractual]
                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;

</script>