<canvas>: グラフィックキャンバス要素

HTML の <canvas> 要素Canvas スクリプティング APIWebGL API を使用して、グラフィックやアニメーションを描画することができます。

コンテンツカテゴリ フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 知覚可能コンテンツ
許可されている内容 透過的コンテンツ、ただし子孫に対話型コンテンツのうち <a> 要素, <button> 要素, <input> 要素の type 属性が checkbox, radio, button のいずれか以外を含まないもの
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス HTMLCanvasElement

属性

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

height

CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。

moz-opaque Non-standard Deprecated

canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された canvas.getContext('2d', { alpha: false }) (en-US) を使用してください。

width

CSS ピクセルで示した座標空間の幅。既定では 300 ピクセルに設定されています。

使用上の注意

代替コンテンツ

<canvas> のブロックの中で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。有用な代替テキストやサブ DOM のヘルプを提供すると、キャンバスがよりアクセシブルになります

</canvas> タグが必要

<img> 要素とは異なり、 <canvas> 要素は終了タグ (</canvas>) が必要です

CSS と HTML におけるキャンバスの寸法指定の違い

表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。

キャンバスの寸法は、 HTML または JavaScript を用いて width および height 属性を <canvas> 要素に直接設定するした方がいいでしょう。

キャンバスの最大寸法

<canvas> 要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源 (Stack Overflow など) から収集したいくらかのデータです。

ブラウザー 最大高 最大幅 最大面積
Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (つまり 16,384 x 16,384)
Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (つまり 22,528 x 20,992)
Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (つまり 16,384 x 16,384)
IE 8,192 pixels 8,192 pixels ?

Note: 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。

HTML

このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。

<canvas width="300" height="300">
  キャンバスの表示内容を説明する代替テキストです。
</canvas>

JavaScript

それから JavaScript コード内で HTMLCanvasElement.getContext() (en-US) を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

結果

アクセシビリティの考慮

代替コンテンツ

canvas 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。

仕様書

仕様書 状態 備考
HTML Living Standard
<canvas> の定義
現行の標準
HTML5
<canvas> の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報