この記事の要点

<canvas> は JavaScript からビットマップ描画できる矩形領域を提供する HTML5 要素 2D 描画: getContext("2d") — 線・矩形・円・テキスト・画像・パスを操作 3D 描画: getContext("webgl") / "webgl2" / "webgpu" — シェーダで GPU 描画 内部解像度は width / height 属性、表示サイズは CSS — 別物なので両方指定すべし 使い所: グラフ / ゲーム / 画像エディタ / 動画フィルタ / シグネチャ入力 — SVG が苦手な高頻度描画に強い 関連: その他 HTML 要素

canvas 要素とは

<canvas> 要素は HTML5 で追加された描画用領域です。JavaScript から API を通じてビットマップを直接描画でき、線・矩形・円・テキスト・画像をピクセル単位で扱えます。アニメーション・ゲーム・データ可視化・画像処理など幅広い用途で使われます。

SVG が「ベクタ要素の DOM」なのに対し、canvas は「ピクセルバッファ」。1 度描いたものは DOM に残らず、再描画には毎回 API 呼び出しが必要 — その代わり高頻度の再描画やピクセル単位の操作に圧倒的に速いです。

基本構文

<canvas id="myCanvas" width="400" height="300">
  ご利用のブラウザは canvas に対応していません。
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 矩形塗りつぶし
ctx.fillStyle = '#3498db';
ctx.fillRect(20, 20, 100, 60);

// 線
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(350, 80);
ctx.stroke();

// テキスト
ctx.font = '20px sans-serif';
ctx.fillStyle = '#000';
ctx.fillText('Hello Canvas', 20, 150);
</script>

属性

属性	意味	既定値
width	内部の描画解像度（ピクセル）	300
height	内部の描画解像度（ピクセル）	150

表示サイズは CSS の width / height で指定します。属性と CSS は別物なので、両方指定しないと意図しない引き伸ばしや潰れが起きます。

主な 2D 描画 API

分類	メソッド	用途
矩形	fillRect(x, y, w, h)	塗りつぶし
	strokeRect(x, y, w, h)	枠線
	clearRect(x, y, w, h)	消去（透明化）
パス	beginPath() / closePath()	パス開始・閉鎖
	moveTo(x, y) / lineTo(x, y)	線分
	arc(x, y, r, s, e) / arcTo(...)	円・円弧
	quadraticCurveTo / bezierCurveTo	曲線
描画	fill() / stroke()	パスを塗り / 線描画
	clip()	パスでクリップ領域指定
テキスト	fillText(text, x, y)	テキスト塗り
	strokeText / measureText	枠線 / 測定
画像	drawImage(img, ...)	画像配置・拡縮・切り出し
ピクセル	getImageData / putImageData	生ピクセル配列を直接編集
変換	translate / rotate / scale / transform	座標系を変形
保存	save() / restore()	状態スタック操作

アニメーション

requestAnimationFrame でフレーム毎に再描画するのが定番。FPS を VSync に同期させ滑らかに動きます。

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let x = 0;

function tick() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#2980b9';
    ctx.beginPath();
    ctx.arc(x, 100, 20, 0, Math.PI * 2);
    ctx.fill();

    x += 2;
    if (x > canvas.width) x = 0;

    requestAnimationFrame(tick);
}
tick();

Retina / 高 DPI 対応

Retina ディスプレイなどでぼけないようにするには、devicePixelRatio に合わせて内部解像度を上げ、CSS で表示サイズを縮める。

const ratio = window.devicePixelRatio || 1;
canvas.width  = 400 * ratio;
canvas.height = 300 * ratio;
canvas.style.width  = '400px';
canvas.style.height = '300px';
ctx.scale(ratio, ratio);

画像のダウンロード

描画した canvas を画像として保存:

const link = document.createElement('a');
link.download = 'image.png';
link.href = canvas.toDataURL('image/png');
link.click();

// Blob 経由でメモリ効率良く
canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'image.png'; a.click();
    URL.revokeObjectURL(url);
}, 'image/png');

SVG との使い分け

観点	canvas	SVG
描画方式	ビットマップ（ピクセル）	ベクタ（DOM 要素）
拡大時のジャギー	あり	なし
個別操作 / アニメ	難しい（自前管理）	容易（CSS / JS で各要素）
大量描画パフォーマンス	高速	遅くなりがち
ユーザインタラクション	座標計算が必要	クリックイベントが効く
ファイルサイズ	画像書き出し後はそのまま	テキストで軽量
典型用途	ゲーム / 画像処理 / ヒートマップ	アイコン / グラフ / イラスト

FAQ

Q: なぜ画像がぼやける？
A: CSS のサイズと canvas.width/height が違う、または devicePixelRatio 未対応のため。両方を一致させる。

Q: アクセシビリティ対応は？
A: canvas の中身は支援技術から見えないので、フォールバック子要素を入れる + aria-label で意味を補足する。

Q: WebGL との関係は？
A: 同じ canvas 要素に getContext("webgl") でアクセスすると 3D 描画 API になる。2D と WebGL は同時取得不可。

関連: その他 HTML 要素