<!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.
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.
Try layerX, layerY
var x = (e.offsetX === undefined) ? e.layerX : e.offsetX;
var y = (e.offsetY === undefined) ? e.layerY : e.offsetY;
FIDDLE
Unfortunately no solution worked for me.
I found a good implementation here:
var target = e.target || e.srcElement,
rect = target.getBoundingClientRect(),
offsetX = e.clientX - rect.left,
offsetY = e.clientY - rect.top;
e.offsetX = offsetX;
e.offsetY = offsetY;
Unfortunately offsetX and layerX are not exactly the same as offsetX is the offset within the current element but layerX is the offset from the page. Below is a fix I am currently using for this:
function fixEvent(e) {
if (! e.hasOwnProperty('offsetX')) {
var curleft = curtop = 0;
if (e.offsetParent) {
var obj=e;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
e.offsetX=e.layerX-curleft;
e.offsetY=e.layerY-curtop;
}
return e;
}
There's a bug in Musa's solution: think what happens if e.offsetX === 0 and e.layerX === undefined...
var x = e.offsetX || e.layerX; // x is now undefined!
A more robust version is as follows:
var x = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
var y = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY;
Or, because we can assume that if offsetX is defined, offsetY will be too:
var hasOffset = e.hasOwnProperty('offsetX'),
x = hasOffset ? e.offsetX : e.layerX,
y = hasOffset ? e.offsetY : e.layerY;
offset actually doesn't translate directly into layer; the offset property doesn't account for the element's margin. The code below should account for this.
function(e) {
var x = e.offsetX, y = e.offsetY;
if(e.hasOwnProperty('layerX')) {
x = e.layerX - e.currentTarget.offsetLeft;
y = e.layerY - e.currentTarget.offsetTop;
}
}
None of the non-jquery versions work completely for various reasons. With your help however i got this to work:
if(!event.hasOwnProperty('offsetX')) {
event.offsetX = event.layerX - event.currentTarget.offsetLeft;
event.offsetY = event.layerY - event.currentTarget.offsetTop;
}
I found that all answers posted here except the last two answers by EnotionZ and laz brannigan (previously with zero votes each) where wrong in cases where several elements were contained within a div. In my case I have several canvas elements inside of a single div and I am listening to each canvas separately.
After considerable trial and error the final correct answer I came to, which works perfectly and identically for me in FireFox and Chrome is as follows:
//inside my mouse events handler:
var anOffsetX = (inEvent.offsetX !== undefined) ? inEvent.offsetX : (inEvent.layerX - inEvent.target.offsetLeft);
var anOffsetY = (inEvent.offsetY !== undefined) ? inEvent.offsetY : (inEvent.layerY - inEvent.target.offsetTop);
Presumably this will also work for margins and such as EnotionZ indicated in his post, but I have not tried that.
But , what you will do if there is not layerX,layerY fields ?
var xe=e.offsetX,ye=e.offsetY;
if(!xe){
xe=e.clientX - $(e.target).offset().left;
}
if(!ye){
ye= e.clientY - $(e.target).offset().top;
}
This question needs an updated answer.
First, as I mentioned in a comment, regarding all of the older answers using layerX and layerY:
"This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."
(Source: developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX)
Second, I've discovered that when you console.log(event) in Firefox, offsetX and offsetY show 0, but when you console.log(event.offsetX), it is not 0. So be careful because you may be being lied to.
This behavior is explained here:
Logging objects
Don't use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).
This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change. This may not be what you want.
(Also note that JSON.stringify() will not do what you want here... It doesn't stringify the entire event object.)
OffsetX/Y behavior is different in FireFox, Chrome/Edge. You may need calculate the value by adding the code snippet:
const offsetX = evt.clientX - this.myRef.current.getBoundingClientRect().left;
const offsetY = evt.clientY - this.myRef.current.getBoundingClientRect().top;
The myRef is ref of its nearest parent element. So the offset will be the distance between this element (clientX) minus the one of its parent.
If some still needs a solutions this one works perfect in Firefox:
var x = e.offsetX || e.originalEvent.layerX;
var y = e.offsetY || e.originalEvent.layerY;
Related
I am trying to use canvas so that with a mouse a person can write their signature. Everything works until I stretch or scroll the screen then it draws the line in a different place away from the mouse.
The Code:
function onMouseUp(event) {
'use strict';
mousePressed = false;
}
function onMouseMove(event) {
'use strict';
if (mousePressed) {
event.preventDefault();
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}
function onMouseDown(event) {
'use strict';
mousePressed = true;
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
ctx.beginPath();
ctx.moveTo(mouseX, mouseY);
}
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);
HTML looks like:
<canvas id="signature" width="567" height="150"></canvas>
event.clientX/Y is relative to the top left corner of the viewport. So scroll isn't taken into account. event.pageX/Y is relative to the document. So it is the position on screen that the event happened including scroll. You can change all references to clientX to pageX and clientY to pageY and it should work.
Explanation of each screen/page/client XY.
It seems like you just need a more reliable method of getting the relative coordinates when the page reflows.
#RyanArtecona wrote the following function in response to this question about mouse coordinates relative to a canvas:
function relMouseCoords(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
This is convenient because it adds a function to get the relative coordinates right onto the prototype of the HTMLCanvasElement function, which means you can just pass in a reference to the canvas you want to use, and get coordinates relative to it.
Using this you could rewrite your mousedown function (and you'll want to do the others as well, but just for an example) as follows:
function onMouseDown(event) {
'use strict';
mousePressed = true;
// get a reference to the 'signature' canvas
var canvas = document.getElementById('signature');
// this returns an object with 'x' and 'y' properties
var mouse = canvas.relMouseCoords(event)
ctx.beginPath();
// use the coordinates you got
ctx.moveTo(mouse.x, mouse.y);
}
Change these two lines
mouseX = event.clientX - can.offsetLeft - mleft;
mouseY = event.clientY - can.offsetTop - mtop;
to
mouseX = event.offsetX || event.layerX;
mouseY = event.offsetY || event.layerY;
in both of your handlers. The browser can handle the relative coordinates for you without having to do any special math. offsetX/Y seems Chrome/IE specific and layerX/Y gets you Firefox support.
Here is a jsfiddle. I made a couple slight declaration changes to get your use stricts to work, since we seem to be missing a little of the code.
Add the scroll offset of the screen to the mouseX and mouseY. with jQuery it would look like this
mouseX = event.clientX - can.offsetLeft - mleft + $(window).scrollLeft;
mouseY = event.clientY - can.offsetTop - mtop + $(window).scrollTop;
This is not a simple answer. The best way to figure this out is to start with a good foundation and then make incremental changes for your situation.. The best article I have seen on this subject is from the Internet Explorer Team:
Handling Multi-touch and Mouse Input in All Browsers
This article will give you a great foundation to capturing mouse input correctly.
I have this design and works perfectly: http://jsfiddle.net/98Bgq/22/
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
But when I resize the screen of my browser, it seems the canvas begins to operate in a totally different way than normal, in the above example can not I click a few more parts of the design, how can I solve this?
Since you're using jQuery, it will probably be easiest to use event.pageX. E.g.
mouseX = e.pageX - $canvas.offset().left;
mouseY = e.pageY - $canvas.offset().top;
Edit: For non-jQuery, this works well:
mouseX = e.hasOwnProperty('offsetX') ? e.offsetX : e.layerX;
mouseY = e.hasOwnProperty('offsetY') ? e.offsetY : e.layerY;
event.pageY/X returns the mouse position relative to the top/left edge of the document. $elmnt.offset() returns the coordinates of the element relative to the document. So subtracting the latter from the former gives you the relative position of the mouse in the canvas.
event.offsetY/X/event.layerY/X give you the coordinate of the event relative to the current layer. layerX doesn't work with chrome, so if it's not present, offsetX is used instead.
offset and scroll might change on a window resize : handle the resize event and recompute them :
this fiddle seems to work :
http://jsfiddle.net/gamealchemist/98Bgq/24/
code :
var offsetX = 0, offsetY = 0;
var scrollX = 0, scrollY = 0;
function computeOffset() {
canvasOffset = $canvas.offset();
offsetX = canvasOffset.left;
offsetY = canvasOffset.top;
scrollX = $canvas.scrollLeft();
scrollY = $canvas.scrollTop();
}
computeOffset();
window.onresize = computeOffset;
I cannot make this ray to follow my mouse cursor.
It's always inverse on X axis.
I think that the problem is with my atan function, but since my trigonometry is fairly low, I have no idea how to fix this one.
This is how I calculate radians:
var dx = target.x - center.x;
var dy = target.y - center.y;
var rad = Math.atan2(dx, dy);
var dx = center.x - target.x;
Fiddle
The fiddle above doesn't work in Firefox as FF doesn't natively support event.offsetX/Y for mouse events, I assume your normalization code was cut off when making the minimalistic example but I'll leave my normalization code here for future reference:
function normOffset(event) {
if (typeof event.offsetX === 'undefined' || typeof event.offsetY === 'undefined') {
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
}
}
Then just pass the jQuery event object to it.
Fiddle
There was no offsetX in e.touches[0] when I tried on iPad. Does anyone know where I can get this value of offsetX?
The correct answer based on the comments in the suggested answer:
e.offsetX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
e.offsetY = e.touches[0].pageY - e.touches[0].target.offsetTop;
This ignores any transformations such as rotations or scaling. Also be sure to check if there are any touches.
You can use clientX or pageX, see here
Thanks, #Kontiki - this is the solution that finally fixed things for me:
if("touchmove" == e.type)
{
let r = canvas.getBoundingClientRect();
currX = e.touches[0].clientX - r.left;
currY = e.touches[0].clientY - r.top;
}
else
{
currX = e.offsetX;
currY = e.offsetY;
}
The page - offset / client approach did not work for me. There was still an offset. I found this other solution that works perfectly:
let r = canvas.getBoundingClientRect();
let x = e.touches[0].pageX - r.left;
let y = e.touches[0].pageY - r.top;
Was having similar issue on binding event-handler using jQuery's .on function on canvas element (Don't know the reason).
I resolved it by binding event-handler using addEventListener. The event object in the handler has offsetX and offsetY defined with proper values.
Hope it helps...
This question already has answers here:
How do I get the coordinates of a mouse click on a canvas element? [duplicate]
(22 answers)
Closed 3 years ago.
Is there a way to get the location mouse inside a <canvas> tag? I want the location relative to to the upper right corner of the <canvas>, not the entire page.
The accepted answer will not work every time. If you don't use relative position the attributes offsetX and offsetY can be misleading.
You should use the function: canvas.getBoundingClientRect() from the canvas API.
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y);
}, false);
Easiest way is probably to add a onmousemove event listener to the canvas element, and then you can get the coordinates relative to the canvas from the event itself.
This is trivial to accomplish if you only need to support specific browsers, but there are differences between f.ex. Opera and Firefox.
Something like this should work for those two:
function mouseMove(e)
{
var mouseX, mouseY;
if(e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if(e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
/* do something with mouseX/mouseY */
}
Also note that you'll need CSS:
position: relative;
set to your canvas tag, in order to get the relative mouse position inside the canvas.
And the offset changes if there's a border
I'll share the most bulletproof mouse code that I have created thus far. It works on all browsers will all manner of padding, margin, border, and add-ons (like the stumbleupon top bar)
// Creates an object with x and y defined,
// set to the mouse position relative to the state's canvas
// If you wanna be super-correct this can be tricky,
// we have to worry about padding and borders
// takes an event and a reference to the canvas
function getMouse = function(e, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, mx, my;
// Compute the total offset. It's possible to cache this if you want
if (element.offsetParent !== undefined) {
do {
offsetX += element.offsetLeft;
offsetY += element.offsetTop;
} while ((element = element.offsetParent));
}
// Add padding and border style widths to offset
// Also add the <html> offsets in case there's a position:fixed bar (like the stumbleupon bar)
// This part is not strictly necessary, it depends on your styling
offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
offsetY += stylePaddingTop + styleBorderTop + htmlTop;
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
// We return a simple javascript object with x and y defined
return {x: mx, y: my};
}
You'll notice that I use some (optional) variables that are undefined in the function. They are:
stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10) || 0;
stylePaddingTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10) || 0;
styleBorderLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
styleBorderTop = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10) || 0;
// Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
// They will mess up mouse coordinates and this fixes that
var html = document.body.parentNode;
htmlTop = html.offsetTop;
htmlLeft = html.offsetLeft;
I'd recommend only computing those once, which is why they are not in the getMouse function.
For mouse position, I usually use jQuery since it normalizes some of the event attributes.
function getPosition(e) {
//this section is from http://www.quirksmode.org/js/events_properties.html
var targ;
if (!e)
e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
// jQuery normalizes the pageX and pageY
// pageX,Y are the mouse positions relative to the document
// offset() returns the position of the element relative to the document
var x = e.pageX - $(targ).offset().left;
var y = e.pageY - $(targ).offset().top;
return {"x": x, "y": y};
};
// now just make sure you use this with jQuery
// obviously you can use other events other than click
$(elm).click(function(event) {
// jQuery would normalize the event
position = getPosition(event);
//now you can use the x and y positions
alert("X: " + position.x + " Y: " + position.y);
});
This works for me in all the browsers.
EDIT:
I copied the code from one of my classes I was using, so the jQuery call to this.canvas was wrong. The updated function figures out which DOM element (targ) caused the event and then uses that element's offset to figure out the correct position.
GEE is an endlessly helpful library for smoothing out troubles with canvas, including mouse location.
Simple approach using mouse event and canvas properties:
JSFiddle demo of functionality http://jsfiddle.net/Dwqy7/5/
(Note: borders are not accounted for, resulting in off-by-one):
Add a mouse event to your canvas
canvas.addEventListener("mousemove", mouseMoved);
Adjust event.clientX and event.clientY based on:
canvas.offsetLeft
window.pageXOffset
window.pageYOffset
canvas.offsetTop
Thus:
canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset);
canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
The original question asked for coordinates from the upper right (second function).
These functions will need to be within a scope where they can access the canvas element.
0,0 at upper left:
function mouseMoved(event){
var canvasMouseX = event.clientX - (canvas.offsetLeft - window.pageXOffset);
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}
0,0 at upper right:
function mouseMoved(event){
var canvasMouseX = canvas.width - (event.clientX - canvas.offsetLeft)- window.pageXOffset;
var canvasMouseY = event.clientY - (canvas.offsetTop - window.pageYOffset);
}
I'd use jQuery.
$(document).ready(function() {
$("#canvas_id").bind( "mousedown", function(e){ canvasClick(e); } );
}
function canvasClick( e ){
var x = e.offsetX;
var y = e.offsetY;
}
This way your canvas can be anywhere on your page, relative or absolute.
Subtract the X and Y offsets of the canvas DOM element from the mouse position to get the local position inside the canvas.