Era pra passar todas as cores, mas trava no verde. Alguém me ajuda a passar as cores e voltar a bolinha pro azul.

Tudo Bem Samantha?

Adicione o código e explique seu problema por favor! Só está com o Título.

<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 listaCor = ['blue', 'red', 'green'];

    var clicaCor = 0;


    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = listaCor[clicaCor];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        clicaCor++;

        for (var i = 0; i <= listaCor.length; i++) {
            var clicaCorInterno = listaCor[i];
            desenhaCirculo(listaCor[clicaCorInterno]);

        }

        return false;
    }

    tela.oncontextmenu = mudaCor;


</script>

Olá, Samantha.

O loop com FOR que você usou ficou meio confuso, funciona, mas não dá resultado nenhum, tanto é que tirei ele do seu código, executei e o resultado foi o mesmo. Esse loop:

for (var i = 0; i <= listaCor.length; i++) {
            var clicaCorInterno = listaCor[i];
            desenhaCirculo(listaCor[clicaCorInterno]);

Veja que na primeira rodada do loop ficará ssim:

var clicaCorInterno = listaCor[0], ou seja, var clicaCorInterno = 'blue'

Executando a próxima linha com isso, ficará assim:

desenhaCirculo(listaCor['blue'])

veja o problema nisso, você não está definindo qual a posição(índice) do listaCor é para buscar, fica indefinido.

Portanto, deixei essa parte do FOR comentada, para não ser executada, e acrescentei um IF:

<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 listaCor = ['blue', 'red', 'green'];

    var clicaCor = 0;


    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = listaCor[clicaCor];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }


    function mudaCor() {

        clicaCor++;

        /*for (var i = 0; i <= listaCor.length; i++) {
            var clicaCorInterno = listaCor[i];
            desenhaCirculo(listaCor[clicaCorInterno]);

        }*/

        if(clicaCor >= listaCor.length){ 

            clicaCor = 0
        }        

        return false;
    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;


</script>

Isso acaba com o problema de depois de 3 cliques ficar só no verde, porque agora, quando o clicaCor for 3, ou seja, verde, ele vai receber o valor de 0, ou seja, vai voltar a ser azul.

Espero ter ajudado, se ainda ficou dúvida, pode falar :)

Obrigada! Maria Eduarda você me ajudou muito com a explicação, tenho que comer muito feijão pra ficar boa em lógica!! Sucesso para você!!

De nada, Samantha. Sucesso para você também!!!