[Duda] NO entiedo por que no sALE

<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 lado=50;
    var xcoordenada=0;
    var ycoordenada=0;
    var puedoDibujar = false;
    var colores
    var x
    var y


    function elegirColor(evento){
                x = evento.pageX - pantalla.offsetLeft;
                y = evento.pageY - pantalla.offsetTop;
               if ((x>xcoordenada)&&(x<(xcoordenada+lado))&&(y>ycoordenda)&&(y<(ycoordenada+lado))){
                  colores="red";
                    console.log(colores);

                }

               else if (x>(xcoordenada+lado)&&(x<(xcoordenada+(2*lado)))&&(y>ycoordenada)&&(y<(ycoordenada+lado))){
                    colores="green"


                }
            else if (x>(xcoordenada+(2*lado))&&(x<(xcoordenada+(3*lado)))&&(y>ycoordenada)&&(y<(ycoordenada+lado))){
                    colores="blue"




                }    

                }


    function dibujarCirculo(evento) {

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

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;

    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }


  //var colores=["red","green","blue"];
    function paleta(x,y,color){

        pincel.fillStyle=color;
        pincel.fillRect(x,y,lado,lado);

    }



paleta(xcoordenada,ycoordenada,"red");
paleta(xcoordenada+lado,ycoordenada,"green");
paleta(xcoordenada+2*lado,ycoordenada,"blue");

 pantalla.onmousedown = habilitarDibujar;

pantalla.onmouseup = deshabilitarDibujar;
pantalla.onclick = elegirColor;


</script>