Cambio de color

Funciona bien tu codigo yo ya me perdí a este no le entiendo este :-(

si esta un poco complicado ¿Qué es lo que no comprendes ?

Por ejemplo, como se enlaza la variable indiceColorActual es = 0 y porque en el if se pide que si es == 3 te retorne nuevamente =0 ?

yo no entiendo como podria ser igual a tres si solo llega indice de colores segun el array a 2, (blue[0], red[1] green[2],), pero entiendo que deba regresar a 0 para iniciar otra vez en blue.

ojala te sirva la explicacion. Igual mi codigo no cambia los colores

<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 colores = ["blue", "red", "green"];


    var indiceColorActual = 0;//indice colores 

    function dibujarCirculo(evento){

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

        //Aquí EN pincel.fillStyle = colores[indiceColorActual] 
        // es donde se vincula indiceColorActual con el array colores
        //Como indiceColorActual esta con  = 0 el color inicial va a ser "azul"
        //Recordemos que el indice de los array inicia con 0
        pincel.fillStyle = colores[indiceColorActual];// esto seria igual a colores[0] 


        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);        
    }

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {

        // indiceColorActual esta como acumulador, eso quiere decir que cada vez que demos click
        // su valor incrementará en uno 

       indiceColorActual++;



       //  si no pongongo esta condicion indiceColorActual seguiria aumentando valores como 0,1,2,3,4,5,6,7.....
       // y nuestro array solo tiene 0,1,2 o azul, rojo, verde
       // por eso le digo que si indiceColorActual == 3 regrese a indiceColorActual = 0 generando un pequeño bucle
       if (indiceColorActual == 3) {

            return indiceColorActual = 0;
       } 
    }

    pantalla.oncontextmenu = alterarColor;

</script> 

compañeros les agregué comentarios, yo también recién estoy aprendiendo, así que mi explicación no es la mejor, espero poder ayudarlos.

gracias x los detalles, creo que entendí aun mejor esta parte de tu logica de indice ==3 ; ya funcionó mi codigo pero se queda en green aunque puse return indiceActual =0 , pero para mi se sobreentiende que es 0 porque el valor del indiceActual ya estaba declarado como 0 desde antes.

saludos.

Muchas gracias por la explicacion detallada :-) me ayudo mucho