Tentei com "while", por que não deu certo?

Olá Rafael,

Tem um erro na verificação do seu While. A palavra length está escrito errada, faltou no N.

while(indiceCorAtual < cores.length){

Teste desta forma e verifique se resolveu.

resolveu, mas acredito que o while fez entrar em loop de alert sem fim kkkk, indo de 0 a 2 e depois voltando ao 0 sem parar...

Isso porque você colocou dentro do if o indiceCorAtual = 0. É realmente necessário?

        if(indiceCorAtual >= cores.length){

            indiceCorAtual = 0;

então, o que tenho que fazer é voltar a cor original, então começa com blue = 0, red = 1, green = 2 e depois quando clicasse novamente o botão direito do mouse, voltar ao blue, mas no primeiro clique do botão direito ele cria esse loop no alert e não para, não consigo nem desenhar na tela...

Ah, ok. Agora entendi.

Você teria então que colocar o indiceCorAtual = 0 fora do While.

Mas ai teriamos outro problema...

Pois quando você clica com o botão direito, o programa entra na função "mudaCor", com isso entra no While e faz os 3 alertas e volta pra cor original, no caso o azul. Com o While o indiceCorAtual vai percorrer todo o tamanho do vetor "cores" que você definiu e depois vai voltar para a cor inicia.

Faça o teste a seguir, você verá que ao clicar com o botão direito, o programa dará os alertas e voltará a cor original.

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

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

        var cores = ['blue', 'red', 'green'];
        var indiceCorAtual = 0;

        tela.onclick = desenhaCirculo;

        function mudaCor() {
        while(indiceCorAtual < cores.length){
                indiceCorAtual++;

                alert(cores[indiceCorAtual]);

                if(indiceCorAtual >= cores.length){

                alert(cores[indiceCorAtual]);
                }

        }
        indiceCorAtual = 0;
        return false; 
        }

        tela.oncontextmenu = mudaCor;

</script>

Está seria a função sem o While e que funciona, quando você clica com o botão direito, ele da o alerta e troca de cor.

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

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

        var cores = ['blue', 'red', 'green'];
        var indiceCorAtual = 0;

        tela.onclick = desenhaCirculo;

        function mudaCor() {
                indiceCorAtual++;
                alert(cores[indiceCorAtual]);
                if(indiceCorAtual >= cores.length){
                        indiceCorAtual = 0;
                        alert(cores[indiceCorAtual]);
                }
                return false; 
        }

    tela.oncontextmenu = mudaCor;
</script>