Por que cores e índice se associam?

pincel.fillStyle = cores[indiceCorAtual];

É a linha acima que muda a cor de acordo com o valor de indiceCorAtual. Se toda vez que alguém clicar o mouse esse valor for incrementado, a lista de cores vai sendo percorrida. E quando o indice estourar o limite da matriz ele volta a zero e o processo de percorrer as cores uma a uma se repete.

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);

}

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
}

Repare nos lugares onde aparece indiceCorAtual.

Espero ter ajudado.