Tu lógica se parece un poquito a mi lógica jajaja... Con algunas variaciones:
<canvas width="600" height="400">
</canvas>
<script>
var pantalla = document.querySelector("canvas");
var pencil = pantalla.getContext("2d");
//Declaro dos variables para resolverlo
var colores = ["blue", "red", "green"];
var color = colores[0];
pencil.fillStyle = "grey";
pencil.fillRect(0,0,600,400);
function exibiralerta(evento)
{
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
console.log(evento);
alert(x + ", " + y);
}
function dibujarCriculos(evento)
{
var x = evento.pageX - pantalla.offsetLeft;
var y = evento.pageY - pantalla.offsetTop;
pencil.fillStyle = color; //pongo aquí mi segunda variable añadida
pencil.beginPath();
pencil.arc(x,y,10,0,2*3.14);
pencil.fill();
}
pantalla.onclick = dibujarCriculos;
//Compruebo en qué parte del array se encuentra para cambiarlo
function alterarColor()
{
if(color == colores[0])
{
color = colores[1];
}
else if(color == colores[1])
{
color = colores[2];
}
else
{
color = colores[0];
}
return false;
}
pantalla.oncontextmenu = alterarColor;
</script>