Tengo una duda!!! (lo hice al ejercicio)

Hola , espero que esté bien.

Veo que ya resolviste tu duda.

Buenas tardes comnpañero Marcos Daniel Rio, acabé de ver está clase, la verdad realicé mi trabajo, siguiendo los parámetros de Christian, dado que realice un if pero muy diferente y no me daba, con los pasos que vi del ejemplo de Christian, pude realizar el mio y al observar el tuyo, noté algunos pasos errados, entre ellos:

1. Que a la función alterarColor() no le diste parámetros para que ejecutara, es decir esta vacia y de esta manera cuando la llamas con el pantalla.oncontextmenu, no encuentra que realizar, por tal motivo te muestra el menú del navegador.
2. El if lo realizaste dentro de la función dibujarCirculo(evento), este debería ir en la función alterarColor()
3. No le asignaste incrementador antes del if es decir en tu caso alterarColor++
4. Y la que me tenía pensando, porque al organizar los puntos anteriores no me corria el programa, es que, nombraste tanto la función como la variable igual, ambas con alterarColor así lo tenías: var alterarColor = 0 y function alterarColor(); en mio opinión, creo que esto puede enloquecer al programa al tomar el nombre de la variable y de la función y no saber cual ejecutar (pienso yo por lo que observe al final, al cambiar el nombre de la variable) otro detallito que vi, es que en el if, alterarColor lo comparaste con un >= a 3** y de acuerdo al array que creamos, las posiciones solo llegan hasta **2, recuerda que en los array, las posiciones se inician contando desde 0

Aquí te dejo el código con los ajustes que le realicé, espero haber podido colaborarte desde mi ignorancia en el tema; también estoy apenas introduciendome en el campo.

Saludos cordiales y apretón de manos desde Medellín - Colombia.

<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); 

   // primero antes de la funcion creamos las variables a utilizar

    var colores = ["blue","green","red"];// creamos el array con los colores a utilzar despues
    var cambiarColor = 0;// aca creamos nuestro iniciador

    function dibujarCirculo(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop; 
        pincel.fillStyle = colores[cambiarColor];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.14);
        pincel.fill();
        console.log(x + "," + y);
    }

    function alterarColor() {

        cambiarColor++
        if(cambiarColor >= colores.length){
            cambiarColor = 0;

        }

        // aca quitamos el alerta para que no despliegue en cada click
        return false;
    }

    pantalla.onclick = dibujarCirculo; // aca le decimos con .onclick que llame a la funcion en cada click
    pantalla.oncontextmenu = alterarColor;// esta linea da la instruccion de que cada vez que haga click con el derecho altere el color

</script>