In HTML5 Canvas what is offsetTop and offsetLeft ?
I'm trying to get the X and Y of a a mouse click event. I know I can get that through:
mycanvas.onclick = function (evt) {
var offX = evt.layerX - mycanvas.offsetLeft;
var offY = evt.layerY - mycanvas.offsetTop;
}
but what is offsetLeft and offsetTop? and what is LayerX and LayerY ?
Definition and Usage The offsetLeft property returns the left position (in pixels) relative to the parent. The returned value includes: the left position, and margin of the element. the left padding, scrollbar and border of the parent.
The offsetTop property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element. the top padding, scrollbar and border of the parent.
You can call the method getBoundingClientRect() on a reference to the element. Then you can examine the top , left , right and/or bottom properties... var offsets = document. getElementById('11a').
The offset parent is the nearest ancestor that has a position other than static. If no offset parent exists, the offset parent is the document body.
The offsetLeft properties are specific to elements and is described in this documentation as:
Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.
LayerX specific to events and is described in this documentation as:
Returns the horizontal coordinate of the event relative to the current layer.
Hope that helps!
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