These days nearly every device is touch-enabled. That means, whenever we develop a touch-based application we need to determine the exact position of where the user has touched and when we work on the browser, the user interaction is done using the mouse. So in the current context, we need to get the coordinates whenever we move the mouse inside the canvas.
When we work on the canvas it's easy to find the x and y coordinates of the mouse using the following two properties:
var mouseX = e.offsetX ;
var mouseY = e.offsetY ;
These properties work fine on every browser except Firefox, because the offsetX and offsetY event properties are not supported by Firefox. Don't worry, however; every problem has a solution. Let's see this example first:
Example : Click Here (check on different browser)
<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="550" height="200"></canvas>
<script type="text/javascript">
window.onload = function (e) {
var drawCanvas = document.getElementById("drawCanvas");
var ctx = drawCanvas.getContext('2d');
ctx.font = 'bold 19pt Courier New';
ctx.fillStyle = 'black';
ctx.fillText('Mouse coordinates:', 20, 180);
drawCanvas.onmousemove = function (e) {
var drawCanvas = e.target;
var ctx = drawCanvas.getContext('2d');
var mousePosX = e.offsetX;
var mousePosY = e.offsetY;
if (mousePosX && mousePosY) {
// Reset the canvas by setting the width to itself
drawCanvas.width = drawCanvas.width;
// Now add some text to it
ctx.font = 'bold 19pt Courier New';
ctx.fillText('Mouse coordinates: x: ' + Math.floor(mousePosX) + ', y: ' + Math.floor(mousePosY), 20, 180);
}
else {
alert("No support for firefox");
}
}
}
</script>
</div>
</form>
</body>
Output
Firefox:
![MouseClickFirefox-NoSupport.png]()
Other browsers:
![MouseClick-OtherBrowserSupport.png]()
To solve this problem we can use the Firefox DOM methods to get the position. Look at this example in which we get the coordinates whenever the user clicks inside the canvas area. Here, we give a condition for the Firefox problem that occurred in the previous example. Now our program will run on every browser including Firefox.
Example : Click Here (Check on different browsers)
<body>
<form id="form1" runat="server">
<div>
<canvas id="drawCanvas" width="550" height="200"></canvas>
<script type="text/javascript">
function start() {
var drawCanvas = document.getElementById("drawCanvas");
var ctx = drawCanvas.getContext('2d');
drawCanvas.addEventListener("mousedown", getCoordinate, false);
}
function getCoordinate(evt) {
var x = new Number();
var y = new Number();
var drawCanvas = document.getElementById("drawCanvas");
if (evt.x != undefined && evt.y != undefined) {
x = evt.x;
y = evt.y;
}
else //it's a Firefox method which is use to get the position
{
x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x = x - drawCanvas.offsetLeft;
y = y - drawCanvas.offsetTop;
alert('Mouse Coordinate-> x: ' + x + ' | y: ' + y);
}
document.addEventListener("DOMContentLoaded", start, false);
</script>
</div>
</form>
</body>
Output:
![MouseClickFirefox.png]()