EnzoAZHMHJ
New Member
I want to obtain the X and Y co-ordinates of my canvas, for which I am using the solution suggested in this question. For easy reference, here is the function I am using (included is a little debug alert message):\[code\]function getCumulativeOffset(obj) { var left, top; left = top = 0; if (obj.offsetParent) { do { alert("obj id = " + obj.tagName + " (" + obj.id + ")"); left += obj.offsetLeft; top += obj.offsetTop; } while (obj = obj.offsetParent); } return { x : left, y : top };};\[/code\]However, I am not getting the results I expect. Now, I have tracked my problem down to the getCumulativeOffset function not picking up the article tag in my HTML. Here the relevant HTML:\[code\]<body> <article> <canvas id="pizza" width="460" height="460">Your browser does not support the HTML5 canvas.</canvas> </article> <div id="temp"></div></body>\[/code\]The relevant CSS:\[code\]article, aside, figure, footer, header, hgroup, nav, section { display:block}body { font: normal medium 'Gill Sans', 'Gill Sans MT', 'Goudy Bookletter 1911', 'Linux Libertine O', 'Liberation Serif', Candara, serif; padding: 0; margin: 0 auto; width: 40em; line-height: 1.75; word-spacing: 0.1em}article { text-align: center;}#pizza { display: inline-block}\[/code\]For some reason, when I test the function, it seems the article tag is not the offsetParent of the canvas as I would expect. Here is the output:
- obj id = CANVAS (pizza)
- bj id = BODY ()