Best IT Recipes

MouseEvent.offsetX I get a lot more than the actual canvas size

When I 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 width of the canvas is displayed up to 300, and the mouseX that remains on the canvas is much larger than 300. I linked a screenshot for it. It works fine in Chrome, but it doesn’t work in Internet Explorer and in the Windows Store apps.

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

The pointer was somewhere near the right edge, but it did not appear in the screenshot, so I marked it. The first number above is the width of the canvas, and the second is the offsetX pointer.

Why is this happening, how to fix it?



Refresh (CSS code added)

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; }
+5
javascript canvas
Jun 14 '13 at 10:44
source share
1 answer

See the difference between OffsetX, Layerx, pageX, clientX, Screen properties. This may be useful for MouseEventsProperties .... Different browsers support different properties. Learning about them, you will learn how to use this property to make your application work on all platforms.

So here is the code (a very simplified version) that I wrote and tested on chrome, safari, firefox, and even touch devices like the iPad. The code takes an event object as an argument, and it will return you a coordinate object having X and Y relative to the canvas. Hope this helps ...

 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; } }
+5
Jun 14 '13 at 12:04 on
source share


More articles:


All Articles