HTML の <canvas> 要素は、スクリプティング (基本的には JavaScript) によりグラフィックを描画することができます。例えば、グラフの描画、写真の合成、さらにはアニメーションの作成までが可能です。<canvas> のブロック内で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、canvas をサポートしない古いブラウザおよび JavaScript が無効であるブラウザで描画されます。
canvas についての詳しい記事は、トピックページをご覧ください。
| コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、パルパブルコンテンツ |
|---|---|
| 許可された内容 | 以下に挙げた要素を除く、インタラクティブコンテンツを子孫に持たないトランスパレントコンテンツ: <a> 要素、<button> 要素、type 属性が checkbox、radio、button のいずれかである <input> 要素 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フレージングコンテンツを受け入れるすべての要素 |
| DOM インターフェイス | HTMLCanvasElement |
属性
他のすべての HTML 要素と同様に、グローバル属性を持ちます。
height- CSS ピクセルで示した座標空間の高さ。デフォルトでは 150 ピクセルに設定されています。
moz-opaque- canvas で半透明性がファクターであるかを知らせます。半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。
width- CSS ピクセルで示した座標空間の幅。デフォルトでは 300 ピクセルに設定されています。
説明
</canvas> タグが必要
<img> 要素とは異なり、<canvas> 要素は終了タグ (</canvas>) が必要です。
canvas のサイズ
canvas の表示サイズは、スタイルシートを使用して変更できます。画像は描画するときに、スタイルで設定したサイズに合うように調整します。ゆがんで描画されているように見える場合は CSS を使用せずに、<canvas> 要素の width および height 属性を明示的に指定してください。
例
<canvas id="canvas" width="300" height="300"> Sorry, your browser doesn't support the <canvas> element. </canvas>
【訳注: canvas 要素の内容には代替コンテンツを含める事ができます。 canvas 要素に対応したブラウザではこの内容は表示されず、非対応ブラウザでの閲覧時にのみ表示されます。】
canvas で半透明効果を使用しない場合は、canvas タグに moz-opaque 属性を設定します。この情報は、描画を最適化するために内部で使用します。ただし、この属性は標準化されておらず、また Mozilla ベースのレンダリングエンジンでのみ機能します。
<canvas id="mycanvas" moz-opaque></canvas>
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard The definition of '<canvas>' in that specification. |
Living Standard | |
| HTML5 The definition of '<canvas>' in that specification. |
勧告 | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.5 (1.8)[1] 6.0 (6.0)[2] 12.0 (12.0)[3] |
9.0 | 9.0[4] | 2.0[5] |
moz-opaque |
未サポート | 3.5 (1.9.1) | 未サポート | 未サポート | 未サポート |
| 機能 | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.5 (1.8)[1] 6.0 (6.0)[2] 12.0 (12.0)[3] |
? | ? | ? | 1.0 |
moz-opaque |
1.0 (1.9.1) | 未サポート | 未サポート | 未サポート | 未サポート |
[1] Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 以前では、<canvas> 要素の高さと幅は符号なし整数でなく符号つき整数でした。
[2] Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) 以前では、高さと幅が 0 の <canvas> 要素がデフォルトの寸法で描画されていました。
[3] Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) より前のバージョンでは <canvas> 要素は、JavaScript 無効時に表示するように仕様書で定められている代替コンテンツを表示しませんでした。これは現在のバージョンでは修正されています。
[4] Opera 9.0 の変更点をご覧ください。
[5] 初期のバージョンの Apple Safari ブラウザでは終了タグが必須ではありませんでしたが、仕様書では必須としています。よって、互換性を高めるために終了タグを含めるようにしてください。そのバージョンの Safari (2.0 より前のバージョン) では CSS のトリックを使用してマスクしなければ、canvas 自体に加えてフォールバック用のコンテンツも表示します。幸いにも、現在そのバージョンの Safari を使用するユーザはほとんどいません。