O que está acontecendo "por baixo dos panos"?

Olá Maria,

Alguns pontos a considerar:

1. O for dentro da função mudaCor() está percorrendo toda a variável cor e retornando a cor inicial, por isso a impressão de que não muda de cor.
2. Não há necessidade dessa variável muda aqui: function mudaCor(muda)
3. Dentro da function desenhaCirculo(evento)não é necessário mudar de cor como ocorre aqui: pincel.fillStyle = mudaCor();

Fiz algumas alterações, veja se compreende o que foi feito:

<canvas width="600" height="400"></canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 400);

    var cor = ['blue', 'red', 'green'];

i = 0

   function mudaCor() {
        i++;
        if (i >= cor.length) {
            i = 0;
        }
        pincel.fillStyle = cor[i];
        return false;
    }



 tela.oncontextmenu = mudaCor;

    function desenhaCirculo(evento) {

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

    }



tela.onclick = desenhaCirculo;



</script>

Bons estudos!

Oi Maria, tudo bem?

Você não está conseguindo trocar de cor porque você inverteu a ordem no seu código. Além disso, O for que está dentro da sua função mudaCor() está sendo lido dentro da variável cor inteira que você declarou e retornando a cor inicial, por isso ela não muda de cor. Primeiro você precisa da função para desenhar o círculo e depois vem a função para mudar de cor, o código não consegue ficar voltando para trocar a cor.

O correto seria:

    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>

Tenta agora e me diz se funcionar. Espero ter te ajudado =)

(Eu marquei a dúvida como solucionada por engano...) Algum de vocês poderia me explicar mais detalhadamente a questão do "for", por que ele está voltando a cor inicial? Pensei que ele iria mudando gradativamente a cada click que eu desse. Obrigada :)

Olá Maria,

O que faz a mudança da cor a cada click é a linha abaixo:

tela.oncontextmenu = mudaCor;

Se você utilizar o for na função mudaCor() ele vai percorrer todas as cores da variável cores e consequentemente voltará à primeira cor selecionada. Ou seja, o for está sendo executado mas é como se estivesse andando em círculos, sempre voltando para o mesmo lugar, por isso não é conveniente utilizá-lo aqui.

O for não funciona como o [código a seguir]? Definimos no for o i=0, a condição de i<=cor.length (para fazer o loop rodar) e o i++, assim como no código a seguir, não? A única coisa não especificada foi o i>=cor.length

i = 0

   function mudaCor() {
        i++;
        if (i >= cor.length) {
            i = 0;
        }
        pincel.fillStyle = cor[i];
        return false;
    }

Maria,

Não funciona justamente porque o for é perfeito para percorrer todas as cores de uma vez e não a cada clique no mouse.