canvas 要素

概要

HTML の canvas 要素 (<canvas>) は、スクリプティング（基本的には JavaScript）によりグラフィックを描画する事ができます。 たとえば、グラフの描画、写真の合成、更にはアニメーションの作成までが可能です。<canvas> のブロック内で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、canvas をサポートしない古いブラウザおよび JavaScript が無効であるブラウザで描画されます。

canvas についての詳しい記事は、トピックページをご覧ください。

• コンテンツカテゴリ フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、パルパブルコンテンツ
• 許可された内容 以下に挙げた要素を除く インタラクティブコンテンツ を子孫に持たないトランスパレントコンテンツ: <a> 要素、<button> 要素、type 属性が checkbox、radio、button のいずれかである <input> 要素
• タグの省略 不可。開始と終了タグの両方が必要。
• 許可された親要素 フレージングコンテンツを受け入れる全ての要素
• DOM インタフェース HTMLCanvasElement

属性

他の全ての HTML 要素と同様に、グローバル属性を持ちます。

width

座標空間の幅。デフォルトでは 300 ピクセルに設定されています。

height

座標空間の高さ。デフォルトでは 150 ピクセルに設定されています。

例

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; element.
</canvas>

【訳注: canvas 要素の内容には代替コンテンツを含める事ができます。 canvas 要素に対応したブラウザではこの内容は表示されず、非対応ブラウザでの閲覧時にのみ表示されます。】

仕様

ブラウザ実装状況

実装に関する注記

Firefox (Gecko)

• Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 以前では、<canvas> 要素の高さと幅は符号無し整数でなく符号付き整数でした。
• Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 以前では、高さと幅が 0 の <canvas> 要素がデフォルトの寸法で描画されていました。
• Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前のバージョンでは <canvas> 要素は、JavaScript 無効時に表示するように仕様書で定められている代替コンテンツを表示しませんでした。これは現在のバージョンでは修正されています。

関連情報

• Canvas トピックページ
• Canvas チュートリアル
• Canvas チートシート
• Canvas のデモ | Demo Studio | MDN