JavaScript　マウスの位置情報について

横方向のX座標と、縦方向のY座標がありますが、
いくつか取得方法があり、性質がそれぞれ異なる上、
ブラウザによっては使えないものもあります。
以下はその見取り図です。

それぞれの使い方を見ていきます。

・ドキュメント内の相対座用を示す
（スクロールしても変わらない）
pageX
pageY

・表示されているウィンドウ内の座標を示す。
（スクロールすると変わる）
clientX
clientY

・PC等の表示している端末上の座標の絶対位置
（この情報はIE、FF、Safari、Operaで共通）
screenX
screenY

・イベントが発生した要素内の座標
offsetX
offsetY

CANVASを使ってHTML5の機能を使うのなら、
IEがほとんど対応していないので
pageX　pageY を使うのが一番楽です。
ただ、CANVASの位置を引く必要があります。

var can = document.getElementById("myCanvas");
canvas_x = can.offsetLeft;
canvas_y = can.offsetTop;
var x = e.pageX - canvas_x;
var y = e.pageY - canvas_y;

これでCANVASがどの位置にあろうと、
マウスの位置は取得できます。