Pelo menos deu certo

Oi Felipe, tudo bem?

Obrigado pela paciência em obter uma resposta!

Ao analisar seu código percebi que você elaborou um sistema em que, a cada clique com o botão esquerdo do mouse, o programa desenha círculos de cores aleatórias especificadas por uma lista. Isso ocorre por causa do uso da propriedade Math.random atribuída na variável valor.

Algumas alterações podem ser feitas para que o código siga a ordem de cores estabelecidos na lista.

A variável cores deve ser movida para fora da função mudaCor() e a variável “i” deve ser criada:

var cores = ["blue", "red", "brown", "pink", "yellow"];
var i = 0;

Nota-se aqui que o valor zero atribuído a i se refere ao valor inicial da lista, no caso, a cor azul.

A função desenhaCirculo() deve ser elaborada com apenas um parâmetro e a propriedade pincel.fillStyle = mudaCor() não deve ter nenhum parâmetro, pois ela receberá a função responsável pela troca de cor.

pincel.fillStyle = mudaCor();

A função mudaCor() deve ser composta por uma condição ao invés do uso do for(), como apresentado nos comandos abaixo:

function mudaCor(){

        corAtual = cores[i]
        if (i == (cores.length - 1) ) {
            i = 0
        } else {
            i++
        }
        return corAtual;
    }

Nessa condição, se “i” for igual ao número máximo de cores dentro da lista a função recomeça na cor inicial, caso contrário ela percorre a lista na ordem que foi escrita, retornando o valor da corAtual.

Após as alterações você obterá um código assim:

//CÓDIGO DO FELIPE COM ALTERAÇÕES:

<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", "brown", "pink", "yellow"];
    var i = 0

    function desenhaCirculo(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.fillStyle = mudaCor();
        pincel.beginPath();
        pincel.arc(x, y, 10, 0 , 2 * 3.14);
        pincel.fill();
    }

    function mudaCor(){

        var corAtual = cores[i]

        if (i == (cores.length - 1) ) {
            i = 0
        } else {
            i++
        }

        return corAtual;
    }

    tela.onclick = desenhaCirculo;

</script> 

A opção apresentada como solução para a atividade usa o clique do botão direito do mouse, para trocar a cor.

Para usar este método a propriedade pincel.fillStyle precisa ser reescrita para que o pincel receba a lista de cores começando pela cor na posição zero.

pincel.fillStyle = cores[i];

A função mudaCor() precisa ser reescrita, mas continua recebendo uma condição.

function mudaCor(){

        i++

        if (i >=cores.length) {
            i = 0
        } 
        return false;
    }

Como agora a função que muda a cor não está associada a função que desenha o círculo, ela precisa ser chamada através do evento oncontextmenu que utilizará o botão direito do mouse, para esta ação.

tela.oncontextmenu = mudaCor;

Com as alterações mencionadas uma outra forma de realizar o exercício seria a escrita pelo código abaixo.

//SEGUNDA FORMA DE REALIZAR A ATIVIDADE:

<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", "brown", "pink", "yellow"];
    var i = 0

    function desenhaCirculo(evento){

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        pincel.fillStyle = cores[i];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0 , 2 * 3.14);
        pincel.fill();
    }

    function mudaCor(){

        i++

        if (i >=cores.length) {
            i = 0
        } 
        return false;
    }

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

</script>

Caso tenha dúvidas, estarei à disposição para te ajudar.

Grande abraço e bons estudos!