canvasの幅と高さの指定する話。

windowいっぱいに全面にcannvasを表示させたい時、CSSで width: 100%; と指定すると楽だと思ったら、scaleがかかって変形されてしまいました。

<canvas style="width:100%;"></canvas>

このような指定のcanvasに描画される矩形は変形（スケール）してしまいます。
不思議な感じだけどなんかtableのような振る舞いなんかなぁ。

JavaScriptでwindow.resizeを監視して幅と高さをcanvasのwidth, height属性(attributes)に指定しないといけません。
しょうがない、ちゃんとJS書いておきましょ。

【教訓】
canvasのサイズをCSSで指定してはいけない