<body>
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'gray';
pincel.fillRect(0, 0, 600, 400);
var cores = ['blue', 'red', 'green', 'yellow', 'black'];
var indiceCorAtual = 0; //Iniciará com 'blue'
function desenhaBolinhasColoridas(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if(indiceCorAtual < cores.length) {
pincel.fillStyle = cores[indiceCorAtual];
pincel.beginPath();
pincel.arc(x, y, 15, 0, 2 * 3.14 );
pincel.fill();
console.log(x + ',' + y);
indiceCorAtual++
}
if(indiceCorAtual >= cores.length) {
indiceCorAtual = 0;
}
}
tela.onclick = desenhaBolinhasColoridas;
</script>
</body>
Em vez de clicar com o botão direito do mouse para mudar a cor e so em seguida clicar com o esquerdo para fazer a bolinha. Criei uma única função que irá executar da seguinte forma.
Ao clicar com o botão esquerdo do mouse irá criar uma bolinha com a primeira cor, logo em seguida a próxima e assim sucessivamente. Após a última cor o programa irá retornar novamente para primeiro cor.
Obs.: Eu não utilizei o else por causa que após ir para primeira cor novamente, ao clicar, o programa executava somente para zerar o 'indiceCorAtual' e só no próximo clique que retornaria a primeira cor. Caso você queira testar utilize o 'else'.
