Eu consegui detectar o botão do mouse selecionado mas, não consegui mudar a ação padrão do mouse da direita. (Ele abre a janela para salvar imagem como...)
<canvas id="jogo" width="600" height="400"> </canvas>
<script>
var jogo = document.getElementById("jogo");
var c = jogo.getContext("2d");
c.fillStyle = "gray";
c.fillRect(0, 0, 600, 400);
var desenhaCirculoAzul = function(mouseEvento) {
var x = mouseEvento.pageX - jogo.offsetLeft;
var y = mouseEvento.pageY - jogo.offsetTop;
c.fillStyle="blue";
c.beginPath();
c.arc(x, y, 10, 0, 2 * 3.14);
c.fill();
console.log("posição do clique: " + x + ", " + y);
};
var desenhaCirculoVermelho = function(mouseEvento) {
var x = mouseEvento.pageX - jogo.offsetLeft;
var y = mouseEvento.pageY - jogo.offsetTop;
c.fillStyle="red";
c.beginPath();
c.arc(x, y, 10, 0, 2 * 3.14);
c.fill();
console.log("posição do clique: " + x + ", " + y);
};
function detectLeftButton(evt) {
evt = evt || window.event;
var button = evt.which || evt.button;
if(button == 1) {
jogo.onclick = desenhaCirculoAzul;
} else if(button == 2) {
alert("erro");
} else if(button == 3) {
jogo.onclick = desenhaCirculoVermelho;
}
}
window.onmousedown = detectLeftButton;
// jogo.onclick = desenhaCirculo;
</script>