HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<canvas>
描画領域（Canvas）要素。JavaScriptを使って、動的なグラフィック、図表、アニメーションなどを描画するための領域を定義します。
info
概要
<canvas> 要素は、初期状態では透明で何も表示しない、描画用のビットマップ領域を作成します。実際の描画は、JavaScriptのAPI（主に **2Dレンダリングコンテキスト** や **WebGL (3D)** コンテキスト）を通じて行われます。
ゲーム開発、グラフ描画、写真加工など、高度なビジュアル表現に欠かせない要素です。
play_circle
デモ (静的表示)
HTML (Source)
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;">
お使いのブラウザはcanvasに対応していません。
</canvas>
<!-- 本来は外部のJavaScriptで描画処理を行います -->
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| width | キャンバスの幅をピクセル単位で指定します。デフォルトは 300 です。 |
| height | キャンバスの高さをピクセル単位で指定します。デフォルトは 150 です。 |
| （グローバル属性） | id, class, style などの全てのHTML要素に共通する属性が使用可能です。 |
code
実用例
1. 基本的なキャンバスの定義
<canvas id="myGraph" width="400" height="200">
グラフを表示するにはブラウザを更新してください。
</canvas>
2. JavaScriptでの描画 (2Dコンテキストの取得)
// HTML側: <canvas id="myCanvas">
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 2D描画コンテキストを取得
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // 四角形を描画
3. WebGL (3D) コンテキストの取得
// HTML側: <canvas id="my3d">
const canvas3D = document.getElementById('my3d');
const gl = canvas3D.getContext('webgl'); // WebGLコンテキストを取得
if (!gl) {
console.log('WebGL not supported');
}
// 以降、gl APIを用いて3D描画処理を行う
lightbulb
知っておくべき重要事項
warning
描画はJavaScriptが必要
<canvas> 要素自体はただの領域であり、HTMLやCSSで直接的なグラフィック（線、図形、色）を描画することはできません。すべての描画操作は、`getContext()` メソッドで取得したコンテキストオブジェクト（例: 2D, WebGL）を経由したJavaScriptコードによって行われます。
accessibility_new
代替コンテンツ
`<canvas>` 要素の内容（開始タグと終了タグの間に記述されたもの）は、ブラウザが Canvas に対応していない場合に表示される「代替コンテンツ」です。支援技術（スクリーンリーダーなど）のためにも、コンテンツの概要や説明を代替コンテンツとして提供することが推奨されます。
`<canvas>` 要素の内容（開始タグと終了タグの間に記述されたもの）は、ブラウザが Canvas に対応していない場合に表示される「代替コンテンツ」です。支援技術（スクリーンリーダーなど）のためにも、コンテンツの概要や説明を代替コンテンツとして提供することが推奨されます。