Pessoal, eu nao sei como tratar quando temos o painel de opçoes de imagens na pagina, como trato isso, para que ele responda ao evento mesmo ?
<html>
<head>
<h2>Canvas</h2>
</head>
<body>
<canvas id="screen" width="600" height="400"></canvas>
</body>
<script>
var screen = document.getElementById("screen");
var c = screen.getContext("2d");
c.fillStyle = "gray";
c.fillRect(0, 0, 600, 400);
var circle = function(x,y){
c.fillStyle="blue";
c.beginPath();
c.arc(x, y, 10, 0, 2*3.14);
c.fill();
}
var circleRed = function(x,y){
c.fillStyle="red";
c.beginPath();
c.arc(x, y, 10, 0, 2*3.14);
c.fill();
}
screen.onclick = function(event) {
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
var z = event.which;
console.log(z);
if(z==3){
circleRed(x,y);
} else {
circle(x,y);
}
console.log("X " + x + " Y " + y);
}
</script>
</html>