page1
width
height
margin
border
padding
A
B
C
滑鼠點擊 canvas 內某一點，算出其座標
<canvas width="..." height="...">
</canvas>
A 是文件最左上角 (0,0) 當作原點
B 是 canvas border 的最左上角，
(event.target.offsetLeft,
event.target.offsetTop)
C 是被 click 到的一個點
(event.pageX,
event.pageY)
Canvas 的
offsetWidth=border+padding+width
offsetHeight=border+padding+height
C 在 canvas 內的座標
x = event.pageX
- event.target.offsetLeft
- borderLeft
- paddingLeft
y = event.pageY
- event.target.offsetTop
- borderTop
- paddingTop
以上算法，不管畫面有無捲動，
都可以正確計算。