Mudança na Cor

O código do professor na aula 'trocando de cor' (https://cursos.alura.com.br/course/logica-programacao-pratica-com-desenho-animacoes-em-jogo/task/21745) é este:

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

A variável 'cores' tem 3 valores, com índices 0, 1 e 2.

Ao clicar com o botão direito do mouse, executa-se a instrução 'oncontextmenu'. Esta, por sua vez, aciona a 'function' mudaCor, que incrementa o contador 'indiceCorAtual' em mais um.

Se este valor de indiceCorAtual chegar a 3, é zerado. Ou seja, a cada clique com a direita, indiceCorAtual variará de 0 a 2.

Este índice é o que será usado ao clicar com o botão esquerdo (onclick), que invoca a 'function' desenhaCirculo, que usará este indiceCorAtual para definir qual das 3 cores utilizar.

dessa forma foi bem mais simples, fui comparar com a minha antes de ver a do instrutor e essa foi bem mais clean. Obrigado!