Working with mouse coordinates
This recipe captures one of the mouse events, mousedown, to find which coordinates on the canvas have been clicked. Here is the output:
How to do it
The recipe is as follows:
The HTML code is as follows:
<html>
<head>
<title>Mouse Coordinates example</title>
<script src="mouseCoords.js"></script>
</head>
<body onload=init()>
<canvas width="400" height="400" id="MyCanvasArea" style="border:2px solid blue;">
Canvas tag is not supported by your browser
</canvas>
<br>
<h1>click on the canvas</h1>
</body>
</html>The JavaScript code is as follows:
var ctx;
var can;
function init()
{
can=document.getElementById("MyCanvasArea");
ctx=can.getContext("2d");
can.addEventListener("mousedown",doMouseDown,false);
}
function doMouseDown(event)
{
xPos=event.pageX;
yPos=event.pageY;
alert("X=" + xPos + "Y=" + yPos);
}How it works...
In this example, the focus is on...
