Menu
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript"> function main(){ var canvas = document.getElementById("canvas"); canvas.addEventListener("mousemove", function(e){ if (!e) e = window.event; var ctx = canvas.getContext("2d"); var x = e.offsetX; var y = e.offsetY; ctx.fillRect(x, y, 1, 1); }); } </script> </head> <body onload="main();"> <div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)"> <canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas> </div> </body> </html> Please consider the above quick and dirty example. Please notice that my canvas is contained by a div having a scale transform applied. The above code works perfectly on any webkit based browser. While moving the mouse it draws points on the canvas. Unfortunately it doesn't in Firefox as its event model does not support the offsetX / Y properties. How can I transform mouse coordinates from (perhaps) event.clientX (which is supported in firefox too) into canvas relative coordinates taking into account canvas position, transform etc? Thanks, Luca.
619
From a JQuery bug tracker page - a nice polyfill is this:
var offX = (e.offsetX || e.pageX - $(e.target).offset().left); .. where e is the event returned from a jquery event. Obviously, only if you've got Jquery already on your project, otherwise will have to do the offset() stuff manually.
154
Try layerX, layerY
var x = (e.offsetX === undefined) ? e.layerX : e.offsetX; var y = (e.offsetY === undefined) ? e.layerY : e.offsetY; FIDDLE
21
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
