2010年10月14日木曜日

canvas lineToなどの描画がずれる!? マウスで描いてみた。

javascriptでマウスクリック、ドラッグでお絵かきできるものをつくっていた時のこと、

マウスの位置に線画かけない!
ぜんぜん違うところに描いてしまう!?

デバッグしながらなんでか全くわからない状況。
マウスイベントでは正しいポジションを返しているにもかかわらず。

ぶっちゃけびっくりしたんだけど、

canvasはCSSでサイズを指定してはいけない!

じつはcanvasの要素でwidth、heightを指定していないと
デフォルトで300px - 150pxになると。

それを単にCSSで引き伸ばした(縮小した)状況になるのだ。


canvasが画像だと思えばこの状況が理解できたかもしれない。


ハマったハマった。

参考
http://mitublog.blog.eonet.jp/default/2010/08/html5-15b1.html