Menu
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;
}
376
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
