We will demonstrate how to read or capture the user mouse coordinates upon specific events. This is correct as long as no wild CSS rules are involved. Detect Mouse Coordinates on Canvas In this exercise we are going to cover one of the most crucial aspects of making interactive canvas applications with JavaScript. The very simplest approach was already posted here. (from MDN) The amount of scrolling that has been done of the viewport area (orĪny other scrollable element) is taken into account when computing the This includes scrolling, so stuff like scrollTop is not needed: The HTMLElement.getBoundingClientRect method is designed to to handle actual screen position of any element. I'm not sure what's the point of all these answers that loop through parent elements and do all kinds of weird stuff. 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. This method returns the size of an element and its position relative to the viewport. function relMouseCoords(event)%)` Ĭanvas deliberately has differnt CSS size vs drawingbuffer size The dimension of the canvas is found using the getBoundingClientRect() function.
#Get mouse coordinates canvas javascript code#
This code works perfectly for me, tested in Firefox and Safari but should work for all.
To account for this you need to loop through the chain of offsetParents, beginning with the canvas element itself. It will return the number of pixels it is offset relative to its offsetParent element, which can be something like a div element containing the canvas with a position: relative style applied.
Since the canvas isn't always styled relative to the entire page, the canvas.offsetLeft/Top doesn't always return what you need. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. I'd recommend only computing those once, which is why they are not in the getMouse function.įor mouse position, I usually use jQuery since it normalizes some of the event attributes.Update (5/5/16): patriques' answer should be used instead, as it's both simpler and more reliable. In this post, we learn how to create a Mouse Coordinates using simple HTML & CSS, and javascript. They will mess up mouse coordinates and this fixes that Queries related to mouse coordinates not math with canvas coordinates in js how to get the all the coordinates of mouse in canvas javascript mouse. Some pages have fixed-position bars (like the stumbleupon bar) at the top or left of the page
StyleBorderTop = parseInt((canvas, null), 10) || 0 StyleBorderLeft = parseInt((canvas, null), 10) || 0 StylePaddingTop = parseInt((canvas, null), 10) || 0 They are: stylePaddingLeft = parseInt((canvas, null), 10) || 0 To get the mouse coordinates relative to an HTML5 Canvas, we can create a getMousePos () method which returns the mouse coordinates based on the position of the client mouse and the position of the canvas obtained from the getBoundingClientRect () method of the window object. You'll notice that I use some (optional) variables that are undefined in the function. We return a simple javascript object with x and y defined OffsetY += stylePaddingTop + styleBorderTop + htmlTop OffsetX += stylePaddingLeft + styleBorderLeft + htmlLeft This part is not strictly necessary, it depends on your styling Also add the offsets in case there's a position:fixed bar (like the stumbleupon bar) Add padding and border style widths to offset takes an event and a reference to the canvasįunction getMouse = function(e, canvas) while ((element = element.offsetParent)) we have to worry about padding and borders To get the mouse coordinates relative to an HTML5 Canvas, we can create a getMousePos() method which returns the mouse coordinates based on the position of. If you wanna be super-correct this can be tricky, set to the mouse position relative to the state's canvas 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, I'll share the most bulletproof mouse code that I have created thus far.