[Sugerencia] Sin IF, FOR u otra cosa, solo 3 líneas de código y listo

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

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

    pantalla.onclick = dibujarCirculo;

    function alterarColor() {
        apuntadorColor = (apuntadorColor + 1) % colores.length;

        return false;
    }

    pantalla.oncontextmenu = alterarColor;

</script> 

He estado viendo algunas dudas y códigos del foro y me he dado cuenta que utilizan condicionales y eso está muy bien pero yo solo agrege el array de colores, un contador y una operación matemática y todo funciona. Sé que muchos se preguntarán que pasa y aquí la explicación 1.- La función "dibujarCirculo" puede acceder al array de colores "colores" sin recibirlo como parámetro porque el array se define en el mismo ámbito (scope) global que la función.

Cuando se define un array en el ámbito global, es accesible para todas las funciones que se encuentren en ese ámbito. Por lo tanto, la función "dibujarCirculo" puede acceder al array "colores" directamente sin necesidad de recibirlo como un parámetro explícito.

En este caso, "colores" se declara como una variable global al inicio del script, lo que significa que está disponible en todo el ámbito global del script, incluyendo la función "dibujarCirculo".

2.- La lógica detrás del cambio de color del círculo es muy simple y se basa en una lista de colores predefinida que se utiliza como paleta de colores.

Cada vez que el usuario hace clic con el botón derecho del ratón en el lienzo, se activa la función "alterarColor", que aumenta el índice del apuntadorColor en uno y lo ajusta al tamaño de la lista de colores utilizando el operador módulo (%).

Después, la función "dibujarCirculo" utiliza el índice del apuntadorColor para seleccionar el siguiente color de la lista de colores, que se utiliza para establecer el color de relleno del círculo que se va a dibujar.

De esta manera, el usuario puede cambiar el color del círculo simplemente haciendo clic con el botón derecho del ratón en el lienzo, y la lista de colores predefinida garantiza que solo se utilicen los colores seleccionados y evita cualquier error de escritura en los nombres de colores.

3.- la línea de código "apuntadorColor = (apuntadorColor + 1) % colores.length;" se utiliza para cambiar de manera circular el índice del siguiente color de la lista de colores cada vez que el usuario hace clic con el botón derecho del ratón en el lienzo.

4.- la expresión "apuntadorColor = (apuntadorColor + 1) % colores.length;" ajusta el valor de "apuntadorColor" a un índice válido de la lista de colores mediante el uso del operador módulo.