<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","green"]; //criei o vetor cores com a sequencia de cores
var cont = 0; //criei uma variavel cont para percorrer as posições do meu vetor cores.
function desenhaCirculo(evento){
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
pincel.fillStyle = cores[cont]; //adicionei o vetor cores na função com o contador ja na primeira posição 0
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2*3.14);
pincel.fill();
console.log(x + "," + y);
}
tela.onclick = desenhaCirculo;
function mudaCor() {
cont++; //toda vez que chamo a funçao"clik no butao direito" cont recebe mais um e corre uma´posição no vetor cores ao ser chamdo pelo desenhaCirculo
if(cont == 3){ //se cont chegar a 3 recebe 0 para nao sair das posiçoes que tem a cores do vetor
cont = 0;
}
alert('Funcionou!');
return false;
}
tela.oncontextmenu = mudaCor;
//instagram : felipednew espero ter ajudado, busque sempre soluçoes simples
</script>