<canvas> 要素は、画像やアニメーション、グラフなどの動的な描画を JavaScript を使って行うための HTML 要素です。キャンバスは、2Dグラフィックスや3Dグラフィックス（WebGL）を描く土台として使われます。
<canvas> タグに対応していない古いブラウザに備えて、代わりのメッセージやコンテンツを中に書いておくことができます。
たとえば、次のようにします。
<canvas id="myCanvas">
お使いのブラウザでは表示できません。
</canvas>現代的なブラウザでは、「お使いのブラウザでは表示できません。」というメッセージは表示されません。代わりに、JavaScript が描画した画像が表示されます。
古いブラウザでは、「お使いのブラウザでは表示できません。」というメッセージが表示されます。
このように <canvas> の開始タグと終了タグのあいだに書いた内容は、通常は表示されませんが、ブラウザが <canvas> をサポートしていない場合にだけ表示されます。
テキストだけでなく、「流れの中に置ける文章や要素（フロー・コンテンツ）」や「文字列の中で使える小さな要素（フレージング・コンテンツ）」を入れることができます。
<canvas id="myCanvas">
<p><span class="warning">警告</span>：お使いのブラウザでは表示できません。</p>
</canvas>すべての要素に共通するグローバル属性のほか、以下に示す属性を canvas 要素に指定できる。
<canvas id="myCanvas" height="200">
お使いのブラウザでは表示できません。
</canvas><canvas id="myCanvas" width="200">
お使いのブラウザでは表示できません。
</canvas>JavaScript で二次元画像を描く例を以下に示す。
<canvas id="filledRectangle" width="100" height="100">
canvas要素をサポートしていません。
</canvas>
<script>
window.onload = function() {
const filledRectangle = document.getElementById("filledRectangle");
if (filledRectangle.getContext) {
// 2次元描画
const context = filledRectangle.getContext("2d");
// 灰色で塗りつぶされた四角形
context.fillStyle = "gray";
context.fillRect(0, 0, 99, 99);
}
}
</script>JavaScript からは HTMLCanvasElement インタフェースを通じて canvas 要素へアクセスできる。
HTMLCanvasElement インタフェースのプロパティを以下に示す。
HTMLCanvasElement インタフェースのメソッドを以下に示す。
getContext(contextType)getContext(contextType, contextAttributes)引数 contextType には、キャンバスに関連する描画コンテキストを定義するコンテキスト識別子を指定する。
| 識別子 | 説明 |
|---|---|
"2d" |
2D 描画（図形・テキスト・画像など） |
"webgl2" |
3D 描画（高度なグラフィクス向け） |
"webgpu" |
WebGPU（次世代 3D 描画 API） |
"bitmaprenderer" |
ImageBitmap の高速描画向け |
引数 contextAttributes には、コンテキスト属性を指定する。
Web Hypertext Application Technology Working Group (2025) HTML Living Standard