Mi solución al diseñando con el mouse

Cualquier opción a mejora escriban sin temor :)

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var color="blue" ;

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

    var puedoDibujar = false;

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

    function dibujarPaleta(){
        var px = 0;
        while(px < 50){
            dibujarCuadrado(0,px,"red");
            dibujarCuadrado(50,px,"green");
            dibujarCuadrado(100,px,"blue");
            dibujarCuadrado(150,px,"orange");
            px = px + 50;
        }
    }

    dibujarPaleta();

    function dibujarCirculo(evento) {

        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;
    }

    function cambiarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft; //para q las coordenadas sea desde el 0
        var y = evento.pageY - pantalla.offsetTop; //para q las coordenadas sea desde el 0

        //se ajusta el click al tamaño de la paleta q es 50x50
        if(y > 0 && y <50){
            if(x > 0 && x<50){
                color="red";
                console.log(color);
            }
            else if(x > 50 && x<100){
                color = "green";
                console.log(color);
            }
            else if(x > 100 && x<150){
                color = "blue";
                console.log(color);
            }   
            else if(x>150 && x< 200){
                color = "orange";
                console.log(color);
            }
        }
    }

    pantalla.onmousemove = dibujarCirculo;
    pantalla.onmousedown = habilitarDibujar; //ejecutar un código cuando el mouse está presionado
    pantalla.onmouseup = deshabilitarDibujar; //el botón del mouse es soltado.
    pantalla.onclick = cambiarColor;

</script>