Canvas

概要（サマリー）

Canvasとは、JavaScriptを使って図形、画像、グラフ、アニメーションなどを描画できるHTML要素である。空の画用紙をページへ置き、プログラムが筆となって線や色を描くイメージである。

詳細解説

描画領域をHTMLへ置く

まずcanvas要素で描画領域を用意する。要素を置いただけでは中身は空であり、JavaScriptから描画命令を実行する。

<canvas id="chart" width="320" height="180"></canvas>

widthとheightは描画バッファーの大きさを指定する。CSSでの表示サイズだけを変えると画像がぼやける場合がある。

2Dコンテキストで描く

getContext("2d")で描画用の機能を取得する。

const canvas = document.querySelector("#chart");
const context = canvas.getContext("2d");

context.fillStyle = "#2563eb";
context.fillRect(40, 30, 160, 80);

この例では左から40、上から30の位置へ青い長方形を描いている。

Canvasを使って画像へ図形や文字を描き込む実例は、次のツールで実際に触って確認できる。

描いた図形はDOM要素ではない

Canvas上の図形は、通常のDOM要素として一つずつ残るわけではない。描画後は一枚の画像に近い状態になるため、各図形のクリック判定や説明はアプリ側で管理する必要がある。

アニメーションにも使える

画面を消して少し位置を変え、再び描く処理を繰り返すことでアニメーションを作れる。ゲーム、データ可視化、お絵描きツール、画像加工などに使われる。

アクセシビリティを補う

Canvasだけでは図形の意味が支援技術へ伝わりにくい。グラフなら数値表も用意するなど、同じ情報へ別の方法で到達できる設計が必要である。

AIコーディングとの関係

AIにはCanvasの幅と高さ、座標系、描きたい形、入力操作、画面密度への対応を具体的に伝えるとよい。生成コードでは、再描画時に前の絵が残らないか、アニメーションを停止できるか、Canvas以外の代替説明があるかを確認する必要がある。

よくある勘違い

Canvasへ描いた図形はHTML要素？

通常は違う。図形ごとのDOM要素ではないため、イベント処理や状態管理を自分で実装する場面が多い。

CSSで拡大すれば高画質になる？

描画バッファーが小さいまま表示だけ拡大するとぼやける。端末の画面密度も考慮する必要がある。

Canvasなら文章表示にも最適？

通常の文章や操作部品はHTMLのほうが検索、選択、読み上げへ対応しやすい。Canvasは自由な描画が必要な場面に向く。

まとめ

• CanvasはJavaScriptで描画するHTML要素である
• 2Dコンテキストで図形や画像を描ける
• 描いた図形は通常のDOM要素として残らない
• 画面密度とアクセシビリティへの配慮が必要である

情報ソース

• WHATWG HTML Standard: The canvas element

より詳しくAIに聞いてみよう

• Canvasを初心者向けに説明してください。
• CanvasとSVGの違いを整理してください。
• 座標と描画コンテキストの役割を教えてください。
• Canvasに図形を描く最小コードを書いてください。
• 高密度画面に対応したCanvasへ改善してください。