[Duda] DESAFIO COLORES CIRCULOS

Buenas noches, revisando tu código encontré dos problemas, te los comento en el código:

<canvas width="600" height="400"> </canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");    
    pincel.fillStyle = "grey"; // fondo gris
    pincel.fillRect(0,0,600,400);  // inicio de pantalla
    var colores = ["orange", "red", "green"]; // colores aleatorios  
    var indiceColorActual = 0; // comienza con orange


    function dibujarCirculo(evento){ // inicio de posicion de circulo
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;   

        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo; // IMPRESION DE CIRCULOS

    function alterarColor() { // COLORES ALEATORIO POR EL SISTEMA

        if(indiceColorActual < colores.length - 1) { //COMENTARIO: EL ERROR ESTÁ EN QUE, SI ÍNDICE ES MAYOR QUE EL TAMAÑO DEL ARRAY INGRESA, LO CORRECTO ES < MENOR.
            indiceColorActual++;
        } 

        else {  //COMENTARIO: PARA QUE LO PUEDAS USAR INDEFINIDAMENTE, SI EL ÍNDICE ES IGUAL A LA CANTIDAD DE ELEMENTOS MENOS 1 (RECORDANDO QUE EL ÍNDICE COMIENZA EN 0) ESTE RESTABLECE EL VALOR DEL ÍNDICE (EN VEZ DE SUMAR), PERMITIENDO QUE SE PUEDAN OCUPAR NUEVAMENTE LOS COLORES.
            indiceColorActual = 0;
        }

        console.log(colores[indiceColorActual]);

        return false; //COMENTARIO: EVITA QUE APAREZCA EL MENÚ AL DAR CLIC DERECHO CON EL MOUSE EN EL CANVAS.
    }   

    pantalla.oncontextmenu = alterarColor; // COLORES DE CIRCULOS CON LA FUNCION ALERAR COLOR

</script>