HTML <canvas> グラフィックキャンバス要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTML の <canvas> 要素 と キャンバススクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。
属性
他のすべての HTML 要素と同様に、グローバル属性を持ちます。
height-
CSS ピクセル数で示した座標空間の高さ。デフォルトでは 150 ピクセルに設定されています。
moz-opaque-
canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された
canvas.getContext('2d', { alpha: false })を使用してください。 width-
CSS ピクセル数で示した座標空間の幅。デフォルトでは 300 ピクセルに設定されています。
使用上の注意
代替コンテンツ
<canvas> のブロックの中で、代替コンテンツを提供すべきです。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。
</canvas> 終了タグ
<img> 要素とは異なり、<canvas> 要素は終了タグ (</canvas>) が必要です。
CSS と HTML におけるキャンバスの寸法指定の違い
表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。
キャンバスの寸法は、HTML または JavaScript を用いて width および height 属性を <canvas> 要素に直接設定するした方がいいでしょう。
キャンバスの最大寸法
<canvas> 要素の正確な最大サイズは、ブラウザーや環境によって異なります。ほとんどの場合、最大サイズは 10,000 × 10,000 ピクセルを超えますが、特に iOS端末では、キャンバスのサイズが 4,096 × 4,096 ピクセルに制限されています。さまざまなブラウザーおよび端末におけるキャンバスのサイズ制限（英語）を参照してください。
メモ: 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。
オフスクリーンキャンバスの使用
OffscreenCanvas API を使用すると、文書とキャンバスを分離した状態でキャンバスを描画することができます。
この利点は、ワーカースレッドがキャンバスの描画を処理できるため、ウェブアプリケーションのメインスレッドがキャンバス操作によってブロックされないことです。
処理を並列化することで、オフスクリーンキャンバス上で複雑なグラフィックを実行している場合でも、ウェブアプリケーションの他の UI の要素は応答性が維持されます。
詳細については、OffscreenCanvas API のドキュメントをご覧ください。
アクセシビリティ
代替コンテンツ
<canvas> 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツは、セマンティック HTML のようにはアクセシビリティツールに公開されません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。
例
HTML
このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。
<canvas width="120" height="120">
キャンバスの表示内容を説明する代替テキストです。
</canvas>
JavaScript
それから JavaScript コード内で HTMLCanvasElement.getContext() を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// (10, 10) の位置に 100×100 ピクセルのサイズの矩形を追加
ctx.fillRect(10, 10, 100, 100);
結果
技術的概要
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 知覚可能コンテンツ |
|---|---|
| 許可されている内容 |
透過的コンテンツ、ただし子孫に対話型コンテンツのうち <a> 要素,
<button> 要素, <input>
要素の type 属性が
checkbox, radio,
button のいずれか以外を含まないもの
|
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | HTMLCanvasElement |
仕様書
| Specification |
|---|
| HTML # the-canvas-element |
ブラウザーの互換性
関連情報
- キャンバス API
- キャンバスのチュートリアル
- OffscreenCanvas
- キャンバス早見表（英語） (2009)
- キャンバス早見表（英語） (pdf) (2015)
- Safari HTML キャンバスガイド - Apple (2013)
CanvasRenderingContext2D2D drawing context for a canvas element - Apple.com- WebGL API
<img>- SVG
- HTML 動画と音声