PaletaColores | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Hola tengo este codigo pero me falta delimitar el espacio donde tengo la paleta de colores, esta de la siguiente manera en la funcion dibujarCirculo el problema es que me delimita una parte que no deberia, se que esa parte esta mal pero me gustaria ponerala en este espacio, debe poderse pero no logro saber como, en la solucion del ejercicio hay cosas que medio entiendo pero que podrian estar mejor y se podrian ahorrar ciertas lineas

<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 color = 2;
    pincel.fillStyle = colores[2];
    var x;
    var y;

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function paletaColores() {

        dibujarRectangulo(0, 0, 50, 50, 'red');
        dibujarRectangulo(50, 0, 50, 50, 'green');
        dibujarRectangulo(100, 0, 50, 50, 'blue');

    }

    paletaColores();

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.x;
            var y = evento.y;

            if ((x > 150) && (x < 600) && (y > 50 ) && (y < 400)) {

                    pincel.beginPath();
                    pincel.arc(x , y, 5, 0, 2 * 3.14);
                    pincel.fill();

            }

        }

    }

    function cambioColor(evento){

        x = evento.x
        y = evento.y

        if ((x > 0) && (x < 50) && (y > 0) && (y < 50)) {

            pincel.fillStyle = colores[0];

        }  else if ((x > 50) && (x < 100) && (y > 0) && (y < 50)) {

            pincel.fillStyle = colores[1];

        } else if ((x > 100) && (x < 150) && (y > 0) && (y < 50)) {

            pincel.fillStyle = colores[2];

        }
    }

    pantalla.onclick = cambioColor;

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

</script>

function paletaColores() { // Agregar un rectángulo que delimita la paleta de colores dibujarRectangulo(0, 0, 150, 50, 'white'); // Dibujar los rectángulos de colores dentro del rectángulo blanco dibujarRectangulo(0, 0, 50, 50, 'red'); dibujarRectangulo(50, 0, 50, 50, 'green'); dibujarRectangulo(100, 0, 50, 50, 'blue'); }