CODEWITHSUNDEEP
javascripthtml
Stacker
Stacker

Reputation: 8237

Canvas offsetTop and offsetLeft

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 ?

Upvotes: 12

Views: 32125

Answers (2)

xiaoyi
xiaoyi

Reputation: 6751

According to MSDN's document, the layerX and layerY are relative to the nearest positioned ancestor in the DOM tree.

I'm trying to fix this too...

Upvotes: 0

Chris Ching
Chris Ching

Reputation: 1444

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!

Upvotes: 9

Related Questions