cosa rara en mi paleta

Hola, pasa que si funciona mi código pero así:

• Cuando empiezo a querer graficar directamente sobre la paleta no grafica nada, lo cual esta muy bien, pero si empiezo a graficar desde alguna parte del canvas y llevo los circulos hasta la paleta de colores entonces si que se grafica. Ayuda porfa

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

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    var colores = ["red","green","blue"];
    var xx = [1,50,100]


    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=color;
        pincel.strokeRect(x,y, base, altura);
    }

    function cuadrito(x,y,colores){

        for (var i = 0; i< colores.length; i++){

            dibujarRectangulo(xx[i],1,50,50,colores[i]);

        }
    }

    cuadrito(50,50, colores);


    function restringir(xcoordenada,ycoordenada){

        if ((xcoordenada >= 0)&& (xcoordenada < 150) &&
            (ycoordenada >= 0) && (yCoordenada < 50)){

            puedoDibujar = false;

        }else {

            puedoDibujar = true;

        }
    }

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

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

        if (restringir(x,y)){

            dibujarCirculo(x,y);
        }
    }

    pantalla.onmousemove = dibujarCirculo;

    pantalla.onmousedown = movermouse;

    pantalla.onmouseup = movermouse;

</script>