Cambiando de Colores.

Aún me apoyo bastante en la ayuda que proporciona el instructor trato en la medida de lo posible analizarla y encontrarle la lógica, sobre lo que se pide. Además, trato de conservar datos que interesan tener presentes.

<h1>Cambiando de color</h1>



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


<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; // comienza con blue

    function dibujarCirculo(evento){
        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;

    function alterarColor() {
        indiceColorActual++;
            if(indiceColorActual>= colores.length){
                indiceColorActual = 0 //Vuelve al primer color.
       }
       return false; //menú contextual padrón de `canvas` no sea exhibido
    }


/*La instrucción return false es importante para que el menú contextual padrón de canvas no sea exhibido, o sea, queremos apenas alterar el color con el clic del botón y no exhibir un menú para el usuario.
El valor máximo de índice Color Actual no puede pasar de 2, pues es el último índice para acceder al último elemento del array. Entonces, necesitamos comprobar con un if cada vez que alterarColor sea llamada y verificar si el indiceColorActual es mayor o igual a colores.length

*/

    pantalla.oncontextmenu = alterarColor;

</script>