Post
Ask Question

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 a 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

Firefox

Other browsers

Browser

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

Output


Similar Articles