グラフや図形、ちょっとしたゲームの画面など、Web ページ上に絵を描くために用意されているのが HTML の <canvas> 要素です。canvas は「描画用のキャンバス（画用紙）」を置く要素で、実際の描画は JavaScript で行います。四角形・円・線・文字などを座標を指定して自由に描けます。この記事では、canvas の基本的な使い方、図形や線を描くコード、サイズ指定の注意点、つまずきやすいポイントまで、実際に描画されるデモを見ながら初心者の方にも分かるように解説します。
目次
canvas 要素とは
<canvas> は、それ自体は空の描画領域を用意するだけの要素です。タグを置いただけでは何も表示されません。ここに絵を描くには、JavaScript でコンテキストと呼ばれる描画用の道具を取得し、その道具に命令を送ります。
まずは下のデモを見てください。canvas に四角形・円・線を描いた例です。JavaScript のコードを書き換えると、描かれる図形が変わります。座標や色を変えて、描画のしくみを体感してみましょう。
<canvas id="myCanvas" width="300" height="160"></canvas>
#myCanvas {
border: 1px solid #ccc;
background: #f7f7fb;
}
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 2D描画のためのコンテキスト
// 四角形を塗る
ctx.fillStyle = "#4a3aff";
ctx.fillRect(20, 30, 90, 90);
// 円を描く
ctx.beginPath();
ctx.arc(190, 75, 45, 0, Math.PI * 2);
ctx.fillStyle = "#e5398a";
ctx.fill();
// 線を引く
ctx.strokeStyle = "#43a047";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();
準備：canvas とコンテキストの取得
描画を始めるには、まず HTML に <canvas> を置き、width と height でサイズを指定します。次に JavaScript で要素を取得し、getContext("2d") で2D 描画用のコンテキストを取得します。このコンテキスト（よく ctx という変数名にします）に対して、以降の描画命令を出していきます。
<canvas id="myCanvas" width="300" height="160"></canvas>const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // これ以降 ctx に描くcanvas の座標は、左上が原点 (0, 0) です。X は右へ、Y は下へ進むほど大きくなります。図形を描くときは、この座標系を意識すると位置を決めやすくなります。
四角形を描く
四角形は、専用のメソッドで手軽に描けます。塗りつぶしは fillRect()、枠線だけは strokeRect() を使います。どちらも引数は「X座標, Y座標, 幅, 高さ」の順です。色は、塗りは fillStyle、線は strokeStyle に CSS と同じ形式で指定します。
// 塗りつぶしの四角形（x, y, 幅, 高さ）
ctx.fillStyle = "#4a3aff";
ctx.fillRect(20, 20, 100, 60);
// 枠線だけの四角形
ctx.strokeStyle = "#e5398a";
ctx.strokeRect(140, 20, 100, 60);
// 指定範囲を消す
ctx.clearRect(0, 0, 50, 50);clearRect() は指定した範囲を透明に消すメソッドです。アニメーションで前の描画を消してから描き直す、といった場面で使います。
円・線を描く
四角形以外の図形は、パス（経路）を組み立てて描きます。beginPath() で描き始め、形を作り、最後に fill()（塗り）または stroke()（線）で確定します。円は arc() を使い、「中心X, 中心Y, 半径, 開始角, 終了角」を渡します。角度はラジアンで指定し、一周は Math.PI * 2 です。
// 円（中心x, 中心y, 半径, 開始角, 終了角）
ctx.beginPath();
ctx.arc(100, 80, 40, 0, Math.PI * 2);
ctx.fillStyle = "#e5398a";
ctx.fill();直線は、moveTo() で始点に移動し、lineTo() で終点まで線を引き、stroke() で描画します。線の太さは lineWidth で指定できます。
ctx.strokeStyle = "#43a047";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(20, 120); // 始点へ移動
ctx.lineTo(280, 120); // 終点まで線
ctx.stroke(); // 描画文字を描く
canvas には文字も描けます。font でフォントを指定し、fillText() で「文字列, X, Y」を渡します。グラフのラベルなどに便利です。
ctx.font = "20px sans-serif";
ctx.fillStyle = "#333";
ctx.fillText("Hello Canvas", 20, 40);サイズ指定でつまずかないために
幅・高さは HTML 属性で指定する
canvas で最もつまずきやすいのがサイズ指定です。width と height は、CSS ではなく <canvas> のHTML 属性で指定するのが基本です。属性で指定するのは「描画される領域そのもの（解像度）」で、CSS の width / height は「表示上の大きさ」を変えるだけだからです。
CSS だけでサイズを変えると、もとの描画領域（既定は 300×150）が引き伸ばされ、絵がぼやけたり縦横比が崩れたりします。きれいに描くには、属性で実際の解像度を指定しましょう。
何も表示されない
図形が出ないときは、JavaScript が canvas 要素を取得する前に実行されていないか確認します。スクリプトを </body> の直前に置くか、読み込み完了後に実行するようにします。また、円や線では beginPath() や、最後の fill() / stroke() を忘れると描画されません。
内容が読み上げ・検索に乗らない
canvas に描いた絵はただのピクセルで、テキスト情報を持ちません。スクリーンリーダーや検索エンジンは中身を理解できないため、重要な情報を canvas だけで伝えるのは避けましょう。文字や図表が主役なら、通常の HTML や img の代替テキストで情報を補うことが大切です。
まとめ
<canvas> は、JavaScript で図形や文字を自由に描ける描画領域です。要点を整理します。
<canvas>を置き、getContext("2d")で描画用のコンテキストを取得する。- 座標は左上が原点。四角形は
fillRect()/strokeRect()。 - 円・線は
beginPath()→ 形 →fill()/stroke()の流れ。円はarc()。 - サイズは CSS ではなく
width/height属性で指定する。 - 描いた内容はテキストではないため、重要な情報は HTML でも補う。
まずは fillRect() で四角形を1つ描くところから始めると、座標と色の感覚がつかめます。慣れてきたら円や線、文字を組み合わせて、グラフや簡単なイラストの描画にも挑戦してみてください。