Question

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 ?

Answer 1

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!