Diseñando con el Mouse, alguna sugerencia

Hola Eduardo,

Está muy bien tu código. Las 2 cosas que se podrían optimizar (principalmente si más adelante se quisiera agregar más colores en la paleta) son:

1) Tener una función para crear la paleta de colores, que itere con un bucle for cada color y lo vaya dibujando en el canvas.

2) La función cambiarColor() también podría tener una iteración con un bucle for.

Te comparto mi código para que lo puedas ver. Pero insisto, tu código está excelente y estas dos cosas que te nombro ayudarían solo en caso que se agreguen más colores a la paleta.

Un saludo y a seguir codeando =)

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

<script>
    function crearPaleta(paleta) {
        x = 0;
        for (var i = 0; i < paleta.length; i++) {
            pincel.fillStyle = paleta[i]
            pincel.fillRect(x, 0, dimensionPaleta, dimensionPaleta)
            x += dimensionPaleta
        }
    }

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

        var paletaInicialX = 0;
        var paletaFinalX = dimensionPaleta

        for(var i = 0; i < paleta.length; i++){
            if ((x > paletaInicialX) && (x <= paletaFinalX) && (y <= dimensionPaleta)) {
                color = (paleta[i])
                console.log(color)
            }
            paletaInicialX += dimensionPaleta
            paletaFinalX += dimensionPaleta
        }
    }

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

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var puedoDibujar = false;
    var dimensionPaleta = 50;

    var paleta = ["blue", "green", "red"];
    var color = "blue";

    crearPaleta(paleta)  ;  

    pantalla.onclick = cambiarColor;

    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>