Hola, pude resolver el ejercicio, el problema es que el area delimitada de la paleta no me salió bien y ahora tengo un área pequeña para diseñar con el mouse. Comparto mi código.

<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;
    var radio = 5;
    var colorPincel = "blue";

    function dibujarCirculo(x,y) {

        if(puedoDibujar) {
            pincel.fillStyle = colorPincel;
            pincel.beginPath();
            pincel.arc(x, y, radio, 0, 2 * 3.14);
            pincel.fill();
            }
        }


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

    function dibujarPaleta(){
        dibujarCuadrado(0,0,"red");
        dibujarCuadrado(50,0,"green");
        dibujarCuadrado(100,0,"blue");
    }

    dibujarPaleta();

    function seleccionarColor(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (x <= 50 && y < 50){
            colorPincel = "red"
        }
        if(x >50 && x <= 100 && y < 50){
            colorPincel = "green";
        }
        if(x > 100 && x <= 150 && y < 50 ){
            colorPincel = "blue";
        }
    }

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

        if (x >= 150 + radio && y >= 50 + radio){
            dibujarCirculo(x,y,colorPincel);
        }
    }

    pantalla.onclick = seleccionarColor;

    pantalla.onmousemove = moverMouse;

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>