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

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

属性

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

height
CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。
moz-opaque
canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された canvas.getContext('2d', { alpha: false }) を使用してください。
width
CSS ピクセルで示した座標空間の幅。既定では300ピクセルに設定されています。

使用上の注意

代替コンテンツ

<canvas> のブロックの中で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。

</canvas> タグが必要

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

canvas の寸法の変更

canvas が表示される寸法は、スタイルシートを使用して変更できます。画像はスタイルで設定した寸法に合うように拡大縮小されます。描画が歪んで見える場合は、 CSS を使用せず、 <canvas>width および height 属性を明示的に指定してください。

このコードの断片は、 HTML 文書に canvas 要素を追加するものです。ブラウザーが canvas を描画できない、あるいは canvas を読み込めない場合は、代替文字列を表示します。役に立つ代替文字列や内部の DOM を提供すると、 canvas のアクセシビリティをより高めることに役立ちます。

<canvas id="canvas" width="300" height="300">
  キャンバスが表示する内容を記述する代替テキストです。
</canvas> 

それから JavaScript のコードで、 HTMLCanvasElement.getContext() を呼び出して描画コンテキストを取得し、キャンバスへの描画を始めます。

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
</script>

不透明のキャンバス

canvas で半透明効果を使用しない場合は、ブラウザーにキャンバスが不透明であることを伝えると、描画を最適化するために内部で使用されます。このためには、描画コンテキストを取得する際に alphafalse を設定してください。

<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d', { alpha: false });
</script>

alpha オプションが標準化される前は、 canvas タグに moz-opaque を使うことができました。しかし、これは Mozilla ベースのレンダリングエンジンでしか動作しないので、使用するべきではありません。この属性がいつ削除されるかを追跡するには、 bug 878155 をチェックしてください。

<canvas id="myCanvas" moz-opaque></canvas>

仕様書

仕様書 策定状況 コメント
HTML Living Standard
<canvas> の定義
現行の標準  
HTML5
<canvas> の定義
勧告 最初の定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1.51 2 39924
height1 あり1.51 2 39924
moz-opaque なし なし3.5 なし なし なし
width1 あり1.51 2 39924
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり41 2 3 なし1 ?
height ? ? あり41 2 3 なし1 ?
moz-opaque なし なし なし4 なし なし なし
width ? ? あり41 2 3 なし1 ?

1. Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.

2. Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.

3. Before Firefox 12, if JavaScript is disabled, the <canvas> element was being rendered instead of showing the fallback content as per the specification. Since then, the fallback content is rendered instead.

4. Although early versions of Apple's Safari browser don't require the closing tag, the specification indicates that it is required, so you should be sure to include it for broadest compatibility. Versions of Safari prior to version 2 will render the content of the fallback in addition to the canvas itself unless you use CSS tricks to mask it.

関連情報