Minha dúvida sobre a questão está na parte de não entender como as variáveis declaradas globalmente podem ser enxergadas pelas funções sem serem atribuídas como parâmetros das mesmas.
Por exemplo, não deveria passar indiceCoresAtual como um parâmetro de desenhaCirculo()? Ou evento já é o suficiente como input da função. O callback de .onclick e de .oncontextmenu já é o suficiente para realizar essa modificação no evento (parâmetro de desanhaCirculo)?
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'grey';
pincel.fillRect(0, 0, 600, 400);
var cores = ['blue', 'red', 'green']
var indiceCorAtual = 0; // começa com blue
function desenhaCirculo(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14);
pincel.fill();
console.log(x + ',' + y);
}
tela.onclick = desenhaCirculo;
function mudaCor() {
indiceCorAtual++;
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0; // volta para a primeira cor, azul
}
return false; // para não exibir o menu padrão do canvas
}
tela.oncontextmenu = mudaCor;
</script>
)