Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tracking mouse position in canvas when no surrounding element exists [closed]

I'm having trouble in getting the mouse position w.r.t canvas.

There are two cases:

1) If there is no div element surrounding the canvas div then I was able to get the mouse position.

2) When the canvas is wrapped in a div then offsetLeft and offsetTop do not work as expected

What accounts for this difference?

like image 581
dragonfly Avatar asked Feb 23 '11 00:02

dragonfly


People also ask

How do I get the coordinates of a mouse click on a canvas element?

The dimension of the canvas is found using the getBoundingClientRect() function. This method returns the size of an element and its position relative to the viewport. The position of x-coordinate of the mouse click is found by subtracting the event's x position with the bounding rectangle's x position.

Which method is used to get the Y coordinate of the point where user have clicked using mouse button?

Simple answer #1 use offsetX and offsetY offsetX; const y = e. offsetY; }); This answer works in Chrome, Firefox, and Safari.

How to get the coordinates of a mouse click on canvas?

- GeeksforGeeks How to get the coordinates of a mouse click on a canvas element ? The coordinates of the mouse whenever a click takes place can be found by detecting the click event with an event listener and finding the event’s x and y position. A function is created which takes in the canvas element and event as parameters.

How to get mouse positions relative to the top of document?

The e.clientX and e.clientY will get the mouse positions relative to the top of the document, to change this to be based on the top of the canvas we subtract the left and right positions of the canvas from the client X and Y.

How do I detect a click on a canvas?

To detect the click, the canvas element is first selected using the querySelector () method. The addEventListener () method is used on this element to listen the ‘mousedown’ event. This event is triggered whenever a mouse button is pressed down.

How do you find the x-coordinate of a mouse click?

The position of x-coordinate of the mouse click is found by subtracting the event’s x position with the bounding rectangle’s x position. The x position of the event is found using the ‘clientX’ property. The x position of the canvas element, i.e. the left side of the rectangle can be found using the ‘left’ property.


1 Answers

You need a function to get the position of the canvas element:

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

And calculate the current position of the cursor relative to that:

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

The values of offsetLeft and offsetTop are relative to offsetParent, which is your div node. When you remove the div they're relative to the body, so there is no offset to subtract.

Similary, e.pageX and e.pageY give the position of the cursor relative to the document. That's why we subtract the canvas's offset from those values to arrive at the true position.

An alternative for positioned elements is to directly use the values of e.layerX and e.layerY. This is less reliable than the method above for two reasons:

  1. These values are also relative to the entire document when the event does not take place inside a positioned element
  2. They are not part of any standard
like image 139
Wayne Avatar answered Oct 13 '22 14:10

Wayne