Solucion al cambio de color

Dejo mi solucion al ejercicio de cambio de color, utilizando diferentes declaraciones de variables

function dibujarCuadrado( xi, yi,xf,yf,color){
        pincel.fillStyle = color; //Propiedad
        pincel.fillRect(xi,yi,xf,yf);// funcion
        pincel.strokeStyle = "black";
        pincel.strokeRect(xi,yi,xf,yf);
    }

function dibujaCirculo(x,y,radio,color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();

    }

    function lanzAlert(evento){
        console.log(evento);
        let x = evento.pageX - pantalla.offsetLeft;
        let y = evento.pageY - pantalla.offsetTop;
        dibujaCirculo(x,y,5,colores[i]);
        //alert("Usted ha echo click en las coordenadas: "+ x + " , "+ y);
    }

    function alterarColor() {
        if (i == 2) 
        {
            i = 0;
        }else{
            i ++;
        }
       return false;
    }

    let pantalla = document.querySelector("canvas");
    let pincel = pantalla.getContext("2d");
    var i = 0;
    const colores = ["blue","red","green"];

    dibujarCuadrado(0,0,600,400, "grey");

    pantalla.onclick = lanzAlert;



    pantalla.oncontextmenu = alterarColor;