Hola a todos. Esta es mi propuesta para cambiar de color al círculo dibujado en pantalla. Solamente modifiqué la función de alterar el color para volver al color inicial al haber llegado al elemento (color) final del array. Y dice una, y dice dos, y dice tres...
<canvas width="600" height="400"> </canvas>
<script>
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
brush.fillStyle = "grey";
brush.fillRect(0,0,600,400);
var colors = ["blue", "red", "green"];
var actualIndexColor = 0; // comienza con blue
function drawCircle(evento){
var x = evento.pageX - screen.offsetLeft;
var y = evento.pageY - screen.offsetTop;
brush.fillStyle = colors[actualIndexColor];
brush.beginPath();
brush.arc(x,y,10,0,2*3.14);
brush.fill();
console.log(x + "," + y);
}
screen.onclick = drawCircle;
function alterColor() {
actualIndexColor++;
if(actualIndexColor > colors.length){
actualIndexColor = 0;
}
return false; //menú contextual padrón de `canvas` no sea exhibido
}
screen.oncontextmenu = alterColor;
</script>
Un saludo y hasta pronto :)