How To Find Mouse Coordinates In HTML5

Introduction

 
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 the different browser)
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <canvas id="drawCanvas" width="550" height="200"></canvas>  
  5.             <script type="text/javascript">  
  6.                 window.onload = function (e) {  
  7.                     var drawCanvas = document.getElementById("drawCanvas");  
  8.                     var ctx = drawCanvas.getContext('2d');  
  9.                     ctx.font = 'bold 19pt Courier New';  
  10.                     ctx.fillStyle = 'black';  
  11.                     ctx.fillText('Mouse coordinates:', 20, 180);  
  12.    
  13.                     drawCanvas.onmousemove = function (e) {  
  14.                         var drawCanvas = e.target;  
  15.                         var ctx = drawCanvas.getContext('2d');  
  16.                         var mousePosX = e.offsetX;  
  17.                         var mousePosY = e.offsetY;  
  18.    
  19.                         if (mousePosX && mousePosY) {  
  20.                             // Reset the canvas by setting the width to itself  
  21.                             drawCanvas.width = drawCanvas.width;  
  22.    
  23.                             // Now add some text to it  
  24.                             ctx.font = 'bold 19pt Courier New';  
  25.                             ctx.fillText('Mouse coordinates: x: ' + Math.floor(mousePosX) + ', y: ' + Math.floor(mousePosY), 20, 180);  
  26.                         }  
  27.    
  28.                         else {  
  29.                             alert("No support for firefox");  
  30.                         }  
  31.                     }  
  32.                 }  
  33.             </script>  
  34.         </div>  
  35.     </form>  
  36. </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)
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <canvas id="drawCanvas" width="550" height="200"></canvas>  
  5.             <script type="text/javascript">  
  6.    
  7.                 function start() {  
  8.                     var drawCanvas = document.getElementById("drawCanvas");  
  9.                     var ctx = drawCanvas.getContext('2d');  
  10.                     drawCanvas.addEventListener("mousedown", getCoordinate, false);  
  11.                 }  
  12.    
  13.                 function getCoordinate(evt) {  
  14.                     var x = new Number();  
  15.                     var y = new Number();  
  16.                     var drawCanvas = document.getElementById("drawCanvas");  
  17.    
  18.                     if (evt.x != undefined && evt.y != undefined) {  
  19.                         x = evt.x;  
  20.                         y = evt.y;  
  21.                     }  
  22.                     else //it's a Firefox method which is use to get the position  
  23.                     {  
  24.                         x = evt.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;  
  25.                         y = evt.clientY + document.body.scrollTop + document.documentElement.scrollTop;  
  26.                     }  
  27.    
  28.                     x = x - drawCanvas.offsetLeft;  
  29.                     y = y - drawCanvas.offsetTop;  
  30.                      
  31.                     alert('Mouse Coordinate-> x: ' + x + ' | y: ' + y);  
  32.                 }  
  33.    
  34.                 document.addEventListener("DOMContentLoaded", start, false);  
  35.             </script>  
  36.         </div>  
  37.     </form>  
  38. </body> 
Output
 
MouseClickFirefox.png


Similar Articles