alguém poderia me explicar a resposta do instrutor? Essa parte do código não entendi muito bem
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
}
Não sei bem qual parte é sua dúvida, mas algumas coisas desse trecho de código só fazem sentido vendo o todo.
A variável var indiceCorAtual = 0 é usada pra indicar qual posição na lista feita em var cores = ['blue', 'red', 'green'] deverá ser retornada.
Quando é realizada a função desenhaCirculo a cor é definida por qual está endereçada naquela lista em pincel.fillStyle = cores[indiceCorAtual]. Como indiceCorAtual é 0, vai puxar 'blue'.
Para conseguir mudar as cores é usada essa função que você mandou o código, e ela vai ser executada quando o botão direito do mouse for clicado dentro dos limites do canvas com tela.oncontextmenu = mudaCor, aí é usado o return false para não abrir o menu normalmente abre com o click do botão direito.
Quando clica com o botão direito, a função mudaCor() é executada, indiceCorAtual era 0 passa a ser 1, agora vai endereçar cores[1] na função desenhaCirculo. Porém temos que fazer o indiceCorAtual voltar a 0 depois que ele endereçar a última cor da lista, pra isso o cores.length define qual é o tamanho da lista no if, que quando o indiceCorAtual ultrapassa esse limite, retorna a 0 e ficará nesse ciclo.
O uso de cores.length é importante para generalizar o código, assim você pode adicionar mais cores à lista sem ter que ficar mudando o número na condicional do if dentro da função mudaCor().