HTML5 canvas上のイベントの位置を取得する

イベントの位置を

　var x = event.clientX ;
　var y = event.clientY ;

でとると、ウインドウのドキュメントを表示している部分の
左上が原点になるので、スクロールするとずれてしまいます。
それに、canvas の左上からの相対座標になりません。
なので、

　canvasOffsetX = canvas.offsetLeft;
　canvasOffsetY = canvas.offsetTop;
　var x = event.clientX - canvasOffsetX;
　var y = event.clientY - canvasOffsetY;

としたのですが、これだと一番上までスクロールしている
状態ならOKですが、下にスクロールするとずれてしまいます。
それで、次に

　canvasOffsetX = canvas.offsetLeft;
　canvasOffsetY = canvas.offsetTop;
　var x = event.pageX - canvasOffsetX;
　var y = event.pageY - canvasOffsetY;

とすると、スクロールしてもOKになりました。
ただし、pageX/pageYはW3C規格では定義されていないし、IEではサポートされていないそうです。
(IE以外の主要なブラウザすべてでサポートされているらしい）

で、"本の虫: DOM level 3のマウスイベントにおけるカーソル位置の詳細"
を参考にさせていただいて、こうなりました。ありがとうございます。

　var rect = event.target.getBoundingClientRect() ;
　var x = event.clientX - rect.left;
　var y = event.clientY - rect.top;