Problema con codigo de dibujar seleccionando colores

Hola!

Espero que me puedan ayudar tengo un problema con este codigo ya que no me esta dibujando en el area delimitada y no se porque

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

            //Variables para los cuadros de colores
            var xRojo = 0;
            var xVerde = 50;
            var xAzul = 100;
            var yCuadrados = 0;
            var tamanhoCuadrados = 50;
            var colorActual = "blue";

            function dibujarCirculo(x,y,colorActual) {

                if(puedoDibujar) {

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

                }
            }

        //Funcion para dibujar cuadrados
            function dibujarCuadrado(x,y,tamanho,color){

                    pincel.fillStyle = color;
                    pincel.fillRect(x, y, tamanho, tamanho);
                    pincel.fill();
                }


        //Función para dibujar cada uno de los cuadrados de la paleta
            function dibujarPaletaColores(){


                dibujarCuadrado(xRojo, yCuadrados, tamanhoCuadrados, "red")
                dibujarCuadrado(xVerde, yCuadrados, tamanhoCuadrados, "green")
                dibujarCuadrado(xAzul, yCuadrados, tamanhoCuadrados, "blue")
            }

           function habilitarDibujar() {

                puedoDibujar = true;
            }

            function deshabilitarDibujar() {

                puedoDibujar = false;
            }


            //Funcion para delimitar el area

            function puedeDisenharArea(xCoordenada,yCoordenada){


                if((xCoordenada >=0 && xCoordenada<(3*tamanhoCuadrados+5)) && 
                   (yCoordenada >=0 && yCoordenada < (tamanhoCuadrados+5))){

                    return false;
                } else{

                    return false;
                    }
            }

            function capturarMovimientoDelMouse(evento){

                var x = evento.pageX - pantalla.offsetLeft;
                var y = evento.pageY - pantalla.offsetTop;

                if (puedeDisenharArea(x,y)){

                        dibujarCirculo(x,y,colorActual);
                }    
            }

            function seleccionarColor(evento) {

                var x = evento.pageX - pantalla.offsetLeft;
                var y = evento.pageY - pantalla.offsetTop;

                //Cada condición altera el color de la variable colorActual

                //Comenzamos por la condición del eje Y que es común para todas

                if (y > yCuadrados && y < (yCuadrados + tamanhoCuadrados)) {

                    if(x > xRojo && x < (xRojo + tamanhoCuadrados)) {

                        colorActual = "red";
                        console.log(colorActual);

                    } else if (x > xVerde && x < (xVerde + tamanhoCuadrados)) {

                        colorActual = "green";

                    } else if(x > xAzul && x < (xAzul + tamanhoCuadrados)) {

                        colorActual = "blue";

                    }            


                }


            }

            pantalla.onmousemove = capturarMovimientoDelMouse;

            pantalla.onmousedown = habilitarDibujar;

            pantalla.onmouseup = deshabilitarDibujar;

            dibujarPaletaColores();

            pantalla.onclick = seleccionarColor;  



        </script>