CANVASのサイズ指定

今更だが、HTML5 の CANVAS における、サイズ指定について、注意点をメモ。

CANVAS タグの width, height は、描画バッファのサイズ指定。

スタイルシートの width, height は、HTML要素のサイズ指定。

スタイルシートのサイズ指定がない場合は、CANVASのサイズに合わされる。

CANVASのサイズ指定がない場合は、デフォルトで 300px * 150px となる。

両方とも未指定の場合は、この 300px * 150px で表示される事になるが、

スタイルシートのみ、サイズを指定した場合、一見、おかしな事になる。

同じ CANVAS に対してサイズ指定を行なっていると考えると、混乱する。

これを、描画領域と表示領域とに分けて考えれば、いくらか、理解し易くなる。

例えば、スタイルシートで 600px * 300px と指定した場合、

描画領域のサイズは、デフォルトの 300px * 150px のままであるから、

描画領域に描き込まれた内容は、表示領域では、２倍に拡大される事になる。

結論としては、CANVAS タグ内で、width, height の指定を必ず行う事。