canvasタグ -グラフィックスやアニメーションを描画する｜HTML辞典
<canvas>タグとは？
<canvas> タグは、JavaScript を使用して動的なグラフィックスやアニメーションを描画するためのタグです。
主に ゲーム、データの可視化、画像編集ツールなど に利用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、エンベッダブルコンテンツ（Embedded Content）。
閉じタグの有無
<canvas> は 開始タグ（<canvas>）と閉じタグ（</canvas>）の両方が必要 です。
基本的な記述方法
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 200, 100);
</script>
使用できる主な属性
<canvas> タグには以下の属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
width | キャンバスの幅（px） | <canvas width="400"> |
height | キャンバスの高さ（px） | <canvas height="200"> |
CSSを使ったデザイン変更
<canvas> 自体には内容がないため、スタイルは 枠線や背景の設定のみ可能 です。
canvas {
border: 2px solid black;
background-color: lightgray;
}
適切な使用例
✅ 矩形（四角形）を描画する
<canvas id="rectangleCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("rectangleCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(30, 30, 100, 50);
</script>
✅ 線を描画する
<canvas id="lineCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("lineCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
✅ 円を描画する
<canvas id="circleCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("circleCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = "green";
ctx.fill();
</script>
適切でない使用例（誤った使い方）
❌ width や height を CSS で変更すると描画が崩れる
<!-- NG: CSS でキャンバスのサイズを変更 -->
<canvas id="wrongCanvas"></canvas>
<style>
#wrongCanvas {
width: 500px;
height: 250px;
}
</style>
✅ 正しい書き方（width / height は HTML 属性で指定）
<canvas id="correctCanvas" width="500" height="250"></canvas>
❌ <canvas> 内にテキストを直接記述すると表示されない
<!-- NG: <canvas> 内に直接テキストを記述 -->
<canvas>ここに図形が表示されます</canvas>
✅ 正しい書き方（JavaScript でテキストを描画）
<canvas id="textCanvas" width="300" height="150"></canvas>
<script>
var canvas = document.getElementById("textCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("Hello Canvas", 50, 50);
</script>
<canvas>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<canvas> | 2D・3D グラフィックスを描画 | JavaScript で制御 | 動的な描画、アニメーション |
<svg> | ベクターグラフィックスを描画 | XML ベースで記述 | 静的な図形やアイコン |
<img> | 画像を表示 | 既存の画像ファイルを表示 | 静的な画像の表示 |
使用上の注意点
✅ width と height は HTML 属性で指定する
- CSS で指定すると、描画が崩れることがある。
✅ JavaScript を使用して描画を制御する
<canvas>は単体では機能せず、JavaScript で制御する必要がある。
✅ <svg> との違いを理解する
<canvas>は動的な描画、<svg>は静的な描画 に適している。
関連タグ
まとめ
<canvas> タグは、HTML文書内で JavaScript を使用して動的なグラフィックスやアニメーションを描画するためのタグ です。width / height は HTML で指定し、JavaScript を活用して自由な描画が可能です。
