Inseri o código abaixo, quando clico com o direito, sai azul, quando com o esquerdo, sai vermelho. Porém no próximo clique o círculo muda de cor. Ou seja, de vermelho para azul... =(
<canvas id="tela" width="1000" height="400"></canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
//Variáveis globais
var x;
var y;
var cx;
var cy;
var cor;
c.fillStyle="gray";
c.fillRect(0, 0, 1000, 390);
//Excluir
alertaClique = function(evento){
// var alertaClique = function(evento){
//Recebe a coordenada X
x = evento.pageX;
//Recebe a coordenada Y
y = evento.pageY;
//Recebe a coordenada X em relação ao canvas
var cx = evento.pageX - tela.offsetLeft;
//Recebe a coordenada Y em relação ao canvas
var cy = evento.pageY - tela.offsetTop;
console.log("Posição do clique: X: " + x + "; Y: " + y);
alert("Alguém clicou no canvas! Posição: X: "+ x + "; Y: " + y + ".\nEm relação ao canvas é a posição: X: " + cx + "; Y: " + cy + ".");
}
function desenhaCirculo(cor){
//Desenha um círculo azul em cada clique
c.fillStyle = cor;
c.beginPath();
c.arc(x, y, 10, 0, 2 * 3.14);
c.fill();
}
function detectLeftButton(evt) {
evt = evt || window.event;
var button = evt.which || evt.button;
if(button == 1) {
// ação para o botão esquerdo
desenhaCirculo("blue");
tela.onclick = alertaClique;
} else if(button == 2) {
// ação para a rodinha do mouse
alert("Você usou a rodinha!");
} else if(button == 3) {
// ação para o botão direito
desenhaCirculo("red");
tela.onclick = alertaClique;
}
}
window.onmousedown = detectLeftButton;
</script>
