Diseñando con el mouse eligiendo el color

a continuación cambie un poco el código por si quiero agregar mas paletas de colores

<meta charset="utf-8">
<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 seleccionarColor = 2;


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

    var xInicio = 0;
    for (var i = 0; i < colores.length; i++) {
        dibujarCuadrado(xInicio,0,colores[i]);
        xInicio = xInicio + 50;
    }

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

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

            if ((x >= 0) && (x <= (50 * colores.length) + 5) && (y >= 0) && (y <= 55)) {

            }
            else {pincel.fillStyle = colores[seleccionarColor];
            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;

    function seleccionarColorPincel(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        var a = 0;
        var b = 50;

        for (var i = 0; i < colores.length; i++) {
            if((x > a) && (x < b) && (y > 0) && (y < 50)){
                seleccionarColor = i;
            }
            a = a + 50;
            b = b + 50;    
        }

    }

    pantalla.onclick = seleccionarColorPincel;

</script>

Hola Carlos , espero que estés muy bien.

Felicitaciones por tu aprendizaje. Estamos priorizando el foro para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Un saludo.