[Duda] Diseñando con mouse

Tengo mi código listo, y en el log sí me muestra el cambio de la variable "colorActual"; el detalle está en que al dibujar, el color siempre está en azul, adjunto mi código, espero puedan apoyarme a saber por qué no cambia de color :(

<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);
    //variables de cuadrados (posicion y tamaño):
    var xCuadrados = [0,50,100];
    var yCuadrados = 0;
    var tamanhoCuadrado = 50;
    //Terminan variables.
    var colorActual = "blue";


    var puedoDibujar = false;

    //Funcion para dibujar cada cuadrado
    function dibujarCuadrado(x,y,tamanho,color){
        pincel.fillStyle = color;
        pincel.fillRect(x,y,tamanho,tamanho);
        pincel.fill();
    }

    //Funcion para dibujar los 3 cuadrados
    function dibujarPaleta(){
        var i=0;
        var colores = ["red","green","blue"];
        var colorActual=0;
        while (colorActual<=colores.length){
            dibujarCuadrado(xCuadrados[i],yCuadrados,tamanhoCuadrado,colores[colorActual]);
            i++;
            colorActual++;
        }
    }

    function habilitarDibujar() {
        puedoDibujar = true;
    }

    function deshabilitarDibujar() {
        puedoDibujar = false;
    }

    //Funcion para delimitar el area de dibujo
    function puedeDisenhar(coordenadaX,coordenadaY){
        if ((coordenadaX > -5 && (coordenadaX < (3*tamanhoCuadrado+5))) &&
            (coordenadaY > -5 && coordenadaY < (tamanhoCuadrado+5))) {

            return false;
        } else {
            return true;
        }
    }

    function capturaMovimiento(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (puedeDisenhar(x,y)){

            dibujarCirculo(x,y);
        }
    }

    function cambiarColor(evento){
        var i = 0;
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (y > yCuadrados && y < (yCuadrados+tamanhoCuadrado)){
            if(x > xCuadrados[i] && x < (xCuadrados[i]+tamanhoCuadrado)){
                colorActual = "red";
                console.log(colorActual);
            } else if(x > xCuadrados[i+1] && x < (xCuadrados[i+1]+tamanhoCuadrado)){
                colorActual = "green";
                console.log(colorActual);
            } else if(x > xCuadrados[i+2] && x < (xCuadrados[i+2]+tamanhoCuadrado)){
                colorActual = "blue";
                console.log(colorActual);
            }
        }
    }

        function dibujarCirculo(x,y,colorActual) {
        if(puedoDibujar) {
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

    pantalla.onmousemove = capturaMovimiento;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    dibujarPaleta();
    pantalla.onclick = cambiarColor;

</script>