Essa foi minha solução... Não sei se é boa...

Olá Jhonatas,

Dei uma olhada na sua implementação e fiz algumas considerações.

Consideração 1: O array de cores (corPincel) deve estar fora da função mudaCor() para que possa ser acessado pelas duas funções (mudaCor e desenhaCirculo), dessa forma não há a necessidade de passar o array como parametro na função desenhaCirculo. Obs*: Essa questão do array estar dentro da função mudaCor() acaba gerando um bug na aplicação pois o código passa a conhecer o array corPincel apenas quando a função mudaCor() é executada.

Consideração 2: A função mudaCor deve apenas mudar o valor do contador. Caso o valor atual seja 2 ele muda pra 0, caso não seja 2 ele apenas incrementa o valor atual. Obs*: O valor correto para zerar o array é o 2 e não o 3 como estava no código, pois o array tem 3 elementos e a contagem dos elementos começa do zero.

Segue o código com os ajustes que mencionei:

<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 evento = 'evento';
  var contador = 0;
  var corPincel = ["blue", 'red', 'green'];

  function desenhaCirculo(evento) {

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

  tela.onclick = desenhaCirculo;

  function mudaCor() {

    if (contador == 2) {
      contador = 0;
    } else {
      contador++;
    } 

  }


  tela.oncontextmenu = mudaCor;

</script>

Guilherme Vitorino da Silva

Muito obrigado pela sua sugestão. Consegui entender perfeitamente. Estou começando meus estudos em programação e toda a ajuda e conselhos são bem vindos!

Grande abraço!!

Jhonatas,

Obrigado você por compartilhar sua solução.

Você pode por gentileza ecerrar o tópico? Caso tenha alguma dúvida estou à disposição.