<canvas>: CANVAS 要素
最終更新：2026-10-13
<canvas>CANVAS 要素
JavaScript（2D または WebGL）で図形・アニメーション・グラフを描画します。タグ自体はスクリプトで描き込むための空白キャンバスです。
| カテゴリ | スクリプトと埋め込み |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </canvas> タグ |
| ステータス | 標準 |
📝 構文
<canvas width="300" height="150"></canvas>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
width | Canvas width in pixels, default 300. | |
height | Canvas height in pixels, default 150. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <canvas> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： canvas はそれ自体では描画できません。JS の getContext を使い、HiDPI 表示には CSS のスケーリングを併用しましょう。
❓ よくある質問
Qcanvas と SVG の違いは何ですか？
A
<canvas> はビットマップ描画です。JS がフレームごとにピクセルを描き、ゲーム・大量の図形・リアルタイムフィルターに向きますが、拡大するとにじみます。SVG はベクター画像です。DOM ノードで形状を記述するため拡大でも劣化せず、アイコンやチャートに向きます。ピクセル単位の高頻度の再描画なら canvas、インタラクティブなベクターグラフィックなら SVG です。Qcanvas の width と height を CSS だけで設定してはいけないのはなぜですか？
Acanvas には2系統のサイズがあります。HTML 属性の
width/height は描画バッファのピクセル数（デフォルト 300×150）で、CSS のサイズは表示の引き伸ばしにすぎません。CSS だけ変えるとバッファが引き伸ばされてぼやけます。正しくは属性値と CSS サイズを両方設定するか、devicePixelRatio に合わせてスケールします。Qcanvas の中身は検索エンジンに収録されますか？
Aされません。canvas の内部はピクセルで、クロールできるテキストも DOM もありません。重要な文字情報は canvas の外に置く必要があります（見出し・説明・アクセシビリティ用の代替テキスト）。複雑なアプリでは、タグの中に DOM 版のフォールバックを入れておくのがおすすめです。
🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
