Diseñando con el mouse !!! costo pero lo logre (creo, ja)

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

    let colorelegido ="blue";
//DISENIANDO LA PALETA DE COLORES

function dibujar (a,b,c,d,color){
        let pantalla = document.querySelector("canvas");
        let pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(a,b,c,d);
        pincel.fill();
    }

dibujar(0,0,50,50,"red")
dibujar(50,0,50,50,"green")
dibujar(100,0,50,50,"blue")

//-------------------------------------------------------------
//ELEGIR COLOR

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

            if(x < 50 && y < 50){
                   return colorelegido = "red";
            }else if(x < 100 && y < 50){
                    return colorelegido = "green";
            }else if(x < 150 && y < 50){
                    return colorelegido = "blue";
            }

    }
    pantalla.onclick = elegirColor;

//---------------------------------
//DIBUJO CON EL MOUSE
    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            if(x < 154 && y < 54){//discriminar paleta
                return 0;
            }else{
                pincel.fillStyle = colorelegido;
                pincel.beginPath();
                pincel.arc(x, y, 5, 0, 2 * 3.14);
                pincel.fill();
            }
        }

    }
//--------------------------------------
//DISCRIMINANDO AREA DE PALETA 


    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>