Olá, poderia me ajudar com esse código? Fiz a função para mudar a cor da bolinha ao clicar, mas não funciona. Quando eu defino na função "desenhaCirculo" que a cor da bola será verde por exemplo, ela funciona.
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
function desenhaCirculo(evento) // parametro (evento) da funcao (que o navegador tem e carrega as informaçoes do clique) para aparecer a posicao do clique
{
var x = evento.pageX - tela.offsetLeft; // posicao do eixo X
var y = evento.pageY - tela.offsetTop; // posicao do eixo y
corBola = cores[x];
pincel.fillStyle = corBola;
pincel.beginPath();
pincel.arc(x, y, 10, 0, 2 * 3.14); // cria um circulo aonde clica
pincel.fill();
console.log(x + ',' + y); // mostra a posicao x e y pelo console
}
function mudaCor() // altera o indice que sera usado para indicar a posicao do array
{
x++;
if (x >= 3) // caso ele seja maior q o numero de elementos do array, volta o indice volta a ser igual a 0
{
x = 0;
}
return false;
}
var tela, pincel, x, cores;
tela = document.querySelector("canvas"); // tras o canvas para o mundo js
pincel = tela.getContext("2d"); // pincel sera em 2d
pincel.fillStyle = "lightgrey";
pincel.fillRect(0, 0, 600, 400);
cores = ["blue", "red", "green"];
x = 0;
tela.onclick = desenhaCirculo; // desenha um circulo em cada clique
tela.oncontextmenu = mudaCor; // em cada clique com botao direito, ele muda o indice do array que esta relacionado a uma cor.
</script>
