<canvas>
| 対応ブラウザ | Chrome 4～ / Firefox 2.0～ / Internet Explorer 9～ / Opera 9.0～ / Safari 3.2～ / Android 3.0～ / iOS 3.2～ | ||
|---|---|---|---|
| タグの分類 |
フロー・コンテンツ フレージング・コンテンツ エンベデッド・コンテンツ パルパブル・コンテンツ |
含められるもの | トランスペアレント（親要素のものを引き継ぐ） |
| 使える場所 | エンベデッド・コンテンツが使える場所 | ||
| 用例 | <canvas id=""sample"" width=""420"" height=""360""></canvas> | ||
<canvas>とは
「canvas」とは、図形を描くために使用するタグです。<canvas>～</canvas> で領域を指定し、JavaScript を用いて線や画像を表示します。
HTML5以前では、Webページ上で図形を使うためにはPNGやJPEGなどの画像を掲載するか、Flashなどのプラグインデータによって表示するのが一般的でした。しかし、<canvas>を使用することで、HTMLとJavaScriptだけでグラフなどの図形の表示が可能になります。
<canvas>による領域はwidth属性とheight属性を使用して指定します。指定しない場合は初期値の300×150pxで領域が表示されます。
<canvas>タグに対応していないブラウザで使った場合、図形の表示をすることはできません。ただし、<canvas>～</canvas>の間にメッセージや画像などを設置することで、対応していないブラウザの場合に表示する代替コンテンツを指定することは可能です。
この代替コンテンツは<canvas>に対応しているブラウザでは表示されませんが、キーボードを通じてフォーカスすることはできます。これにより、<canvas>内にマウスからのイベントを受け付けるような内容を描画する際、同等の操作がキーボードでも可能なようにすることができます。ただしこの場合、フォーカスリング（操作を分かりやすくするためにフォーカス位置を点線で囲むなどの強調）は自動では表示されないため、スクリプト側で表示するようにしなければなりません。
