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

Question

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

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

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

Screenshot: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

The pointer was somewhere near the right edge but it didn't came in screenshot, that's why i marked it. The first number on the top is the canvas width and the second one shows pointer offsetX.

Why is this happening, how to correct it?

Update(Added CSS code)

Css code

#mainScreen {
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px 100px 20px 1fr 30px;
    height:inherit;
}

#topScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px;
    -ms-grid-rows: 20px 1fr 20px;
}

#canvasWidth {
    display: -ms-grid;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

#mouseX {
    display: -ms-grid;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
}

#gameScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
    -ms-grid-rows:1fr;
    -ms-grid-columns: 1fr;
    height:inherit;
    width:inherit;
}
#gameCanvas {
    height:inherit;
    width:inherit;
    background-color:white;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

Anything of help here: http://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element?rq=1 — Matthew Gilliard, Jun 14 '13 at 10:50

sumitb.mdi · Answer 1 · 2013-06-15T11:48:34.717

6

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;
}
}

edited Jun 15 '13 at 11:48

answered Jun 14 '13 at 12:04

sumitb.mdi

1,010
14
17

Thanks for reply, now I can figure out difference between them. But I don't know if there is much difference between clientX and offsetX (They looked almost same). Although using clientX resulted very same. PageX and layerX are different and cannot be used here. So the solution didn't worked. – Abhishek Verma Jun 15 '13 at 10:17
Didn't worked, works everywhere except IE and Windows 8 application simulator. Also tried this one http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ nothing helped.(Why in the world someone made IE!!). I guess there is something to do with the CSS code, because when I don't set canvas width to inherit it becomes 300 which is what shown by canvas.width. I have updated the question with the CSS code can you please have a look at it. – Abhishek Verma Jun 19 '13 at 07:34
@AbhishekVerma in which version of IE you tried it? Actually the given function works fine in my system in all the platform (I am using IE-10) – sumitb.mdi Jun 19 '13 at 09:18
I am too using IE10, actually I am making a Windows 8 game but when it didn't worked in Windows 8 simulator I tried in IE10, it again didn't worked. But it works in chrome(maybe because chrome doesn't recognize -ms- code in Css). Code works fine without Css. Did you tried my code including the Css one? – Abhishek Verma Jun 20 '13 at 10:44

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

1 Answers1

Linked