Canvas 下地の描画範囲を設定する(width・height) [html5 の Canvas を使ってみる：第卌四回]

Canvas で描いた形をウェブページの中でポイント的に使いたい場合は、下地のサイズを調整する必要が出てくると思う。そんな場合、CSS で定義してしまうと、デフォルトの下地のサイズに対して縮小もしくは拡大されてしまうので、<canvas> 要素の中で定義してやる必要がある。

★html 側

<canvas id="size" width="120" height="50"></canvas>

まずは上記の定義を行わない場合はこうなる。判りやすいように下地に青で色を付けてある。


次に、上記の定義を行った場合。描画範囲が小さくなっていることが判る。


ちなみに、CSS で #size に対して width と height を設定すると、こんな感じになってしまう。


しかし、レイアウト等に関しては CSS で定義を、というスタンスを考えると、CSS で設定できる方がいいのではないだろうか。

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53