![]() When image pixel width isn’t matched by it’s CSS width, you’ll need to apply some ratio on pixel values: /* Returns pixel coordinates according to the pixel that's under the mouse cursor**/ HTMLCanvasElement. This is correct as long as no wild CSS rules are involved. 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. function relMouseCoords( event) canvas deliberately has differnt CSS size vs drawingbuffer size 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. ![]() By building a system for feedback into your company, you can ensure that every development you can make in your business is aligned with the desires of your customers. Update (5/5/16): patriques’ answer should be used instead, as it’s both simpler and more reliable. As a result, one of the best things that you could do to help your business grow and thrive is to incorporate an effective feedback system into your business. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |