HTML5のcanvasのサイズを指定するときは、styleとして与えるのではなく属性として与えないといけない

座標指定がどうしてもズレるなぁと悩んでいたら、めちゃくちゃ凡ミスをしていたのでメモ。

正しい例

<canvas id="hoge-canvas" width="350px" height="500" />

canvas要素に属性としてwidthとheightを与えている。

間違った例

<canvas id="hoge-canvas" class="hoge" />

.hoge {
	width: 350px;
	height: 500px;
}

こうすると内部的にはデフォルトのwidth: 150, height: 300が適用されるが、
styleが当たって一見ちゃんと350*500でキャンバスが生成されたように見える。
要は引き伸ばされてる状態なので、fillRect()などで座標を指定して描画しようとすると変になる。

参考

canvas: グラフィックキャンバス要素