The mouseEvent.offsetX I am getting is much larger than actual canvas size


  • When I use use the following Javascript code

    function init() {
        var gameCanvas = document.getElementById("gameCanvas");
        document.getElementById("canvasWidth").innerHTML = gameCanvas.width;
        gameCanvas.addEventListener("mousemove", handleMouseEvent);
    function handleMouseEvent(mouseEvent) {
        document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;

    with this html

        <div id="mainScreen">
            <div id="topScreen">
            <h1 id="canvasWidth">Score:</h1>
            <h1 id="mouseX">0</h1>
            <div id="gameScreen">
                <canvas id="gameCanvas" onclick="init()">               

    The canvas width is showing up 300 while the mouseX which remains in the canvas shows much beyond 300. It works fine in Chrome but it doesn't work in Internet Explorer and in Windows store apps.

    (I wanted to upload a screenshot, but it is saying 

    • Body text cannot contain images or links until we are able to verify your account.

    How to do that??)

    When the mouse is at very right edge of the canvas, "event.offsetX" shows some values near 1500 but the maximum canvas width is 300 as shown by "gameCanvas.width". Not sure which one is wrong.

    Why is this happening, how to correct it?

    Saturday, June 15, 2013 3:32 AM

All replies

  • hiii,


    See the difference between offsetX, layerX, pageX, clientX, screenX Properties This might be useful MouseEventsProperties.... Different browsers support different properties  After learning about them you will get to know how to use these property so your application Works on all platforms

    Okay so here is a code( a very simplified version) which I wrote and tested on the chrome,safari,firefox and even touch devices like iPad.  The Code takes the event object as the argument and it will return you the coord object having the X and Y with respect to the canvas. Hope this will help...

    containerX = document.getElementById('container').offsetLeft;
    containerY = document.getElementById('container').offsetTop;
    //here container is the id of my canvas basically the above two lines are global 
    // in my code 
    function getX_Y(evt){
    var coord={
        X: null,
        Y: null
    var isTouchSupported = 'ontouchstart' in window;
    if(isTouchSupported){                     // for touch devices
        coord.X = evt.clientX-containerX;
        coord.Y = evt.clientY-containerY;
        return coord;
    else if(evt.offsetX || evt.offsetX == 0){    //for webkit browser like safari and chrome
        coord.X = evt.offsetX;
        coord.Y = evt.offsetY;
        return coord;
    else if(evt.layerX || evt.layerX == 0){      // for mozilla firefox
        coord.X = evt.layerX;
        coord.Y = evt.layerY;
        return coord;
    Wednesday, June 19, 2013 9:23 AM
  • The question you linked is the one asked by me, but the solution didn't worked that is why i repeated the question here.
    Monday, June 24, 2013 11:35 AM