HTML5 で登場した canvas（キャンバス）タグ は、Webページ上に「絵を描く」ための特別な領域を作るタグです。
JavaScript と組み合わせることで、
- 図形描画
- グラフ
- ゲーム画面
- アニメーション
- 動くインタラクティブUI
など、通常のHTMLだけでは作れない高度な表現が可能になります。
この記事では、初心者向けにcanvas の意味・仕組み・基本コード・よく使う描画例 を分かりやすく解説します。
canvasタグとは？
canvas は「Web上に図を描くための白紙のキャンバス」 を作るタグです。
HTML自体には描画機能はありませんが、canvas を使うことで JavaScript の命令を受け取り、図形やアニメーションを描画できます。
基礎として覚えるべき点：
- canvas単体には表示機能はない
- JavaScript で操作して初めて絵が出る
- 自由な描画やゲーム制作にも使われる
canvasで何ができる？
canvas は「ピクセル単位で描画する」仕組みのため、非常に多数の表現が可能です。
- 図形（四角・丸・線）
- 文字描画
- 画像の描画・切り抜き
- アニメーション
- ゲーム（2Dゲームの基盤）
- データ可視化（グラフ描画）
- インタラクティブUI
アプリのような表現まで作れるため、HTML5登場以降、Webの可能性が大きく広がりました。
canvas の基本構造（最小コード）
まずは HTMLだけでキャンバスを用意します。
<canvas id="myCanvas" width="400" height="300"></canvas>
ポイント
idを必ず付ける（JSで操作するため）widthとheightでキャンバスの解像度を指定- CSS の
width / heightと混同しない（後述）
JavaScriptで描画する仕組み
canvas は JavaScript で操作します。
以下は四角形を描く最小コード：
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#4A90E2'; // 塗りつぶしの色
ctx.fillRect(50, 30, 200, 100); // x, y, width, height
</script>
getContext(‘2d’) が重要
canvas の描画モードを取得し、2D描画用の「筆」を持つイメージです。
代表的な描画例（図形・文字・画像）
四角形（塗りつぶし）
ctx.fillStyle = 'orange';
ctx.fillRect(10, 20, 150, 100);
円（円弧の描画）
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.fill();
線を引く
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(200, 100);
ctx.stroke();
文字の描画
ctx.font = '20px sans-serif';
ctx.fillText('Hello Canvas!', 20, 40);
画像を描画
const img = new Image();
img.src = 'sample.jpg';
img.onload = () => {
ctx.drawImage(img, 0, 0, 200, 150);
};
canvas は画像加工にも利用できます。
canvas の注意点（CSSサイズとの違い）
canvas には 2つのサイズ があります。
| 種類 | 意味 |
|---|---|
| HTML属性の width/height | 描画解像度 |
| CSSの width/height | 見た目のサイズ |
属性サイズとCSSが一致しないとぼやける
例：
canvas の属性が300×150
CSSで600×300にすると、引き伸ばされてぼやける原因になります。
よくあるトラブルと対処法
何も描画されない
→ <script> が canvas より前に読み込まれている
→ id が間違っている
→ JavaScript のエラー
画像が描画されない
→ img.onload を使っていない
→ パスが間違っている
ぼやける
→ CSS と属性のサイズ差が原因
→ 解像度を 2倍にすることで改善（Retina対応）
canvas が使われる実務例
- Webゲーム（2Dアクション、パズル）
- グラフライブラリ（Chart.js など）
- 線描画ツール
- 動画編集の一部処理
- 画像加工アプリ
- AIツールの描画領域
HTML × JS ででありながら、アプリ並みの表現に使われています。
まとめ
- canvasは「描画用の白紙」
- HTMLでは表示されず、JavaScriptで操作する
- 図形・文字・画像・アニメーションなど多用途
- width/height属性とCSSサイズは別物
- ぼやける問題はサイズ不一致が原因
- 実務でも広く使われる強力なタグ
canvasの理解は、Webアプリや動きのあるUIを作る第一歩 です。
著者からのひと言
canvasは、HTMLの中では少し難しめの要素ですが、一度仕組みが分かると「Webでここまでできるの!？」と驚くはずです。
まずは簡単な四角形や文字描画から試し、少しずつブラウザ描画の世界に触れてみてください！
次回の記事は「formタグの基本構造」です。
