javascriptでマウスクリック、ドラッグでお絵かきできるものをつくっていた時のこと、
マウスの位置に線画かけない!
ぜんぜん違うところに描いてしまう!?
デバッグしながらなんでか全くわからない状況。
マウスイベントでは正しいポジションを返しているにもかかわらず。
canvasはCSSでサイズを指定してはいけない!
じつはcanvasの要素でwidth、heightを指定していないと
デフォルトで300px - 150pxになると。
それを単にCSSで引き伸ばした(縮小した)状況になるのだ。
canvasが画像だと思えばこの状況が理解できたかもしれない。
ハマったハマった。
参考
http://mitublog.blog.eonet.jp/default/2010/08/html5-15b1.html