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>

アクセシビリティに関する懸念

代替コンテンツ

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

仕様書

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 2
補足
完全対応 2
補足
補足 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.
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
Opera Android 未対応 なしSafari iOS 完全対応 1Samsung Internet Android ?
heightChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 2
補足
完全対応 2
補足
補足 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.
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
Opera Android 未対応 なしSafari iOS 完全対応 1Samsung Internet Android ?
moz-opaque
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 3.5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
widthChrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5
補足
完全対応 1.5
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
IE 完全対応 9Opera 完全対応 9Safari 完全対応 2
補足
完全対応 2
補足
補足 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.
WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4
補足
完全対応 4
補足
補足 Before Firefox 5, the canvas width and height were signed integers instead of unsigned integers.
補足 Prior to Firefox 6, a <canvas> element with a zero width or height would be rendered as if it had default dimensions.
補足 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.
Opera Android 未対応 なしSafari iOS 完全対応 1Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報