「2D コンテキスト」は“キャンバスに絵を描くためのペン箱”
Canvas API を使うとき、必ず最初にやるのがこれです。
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
この ctx が 2D コンテキストです。
HTML の <canvas> は、ただの「白い紙」。
2D コンテキストは、その紙に線・図形・文字・画像を描くための
「ペン・ブラシ・消しゴム・定規が全部入ったペン箱」だと思ってください。
以降は、この ctx に対して命令を出していくことで、
キャンバスにいろいろ描いていきます。
2D コンテキストを手に入れるまでの流れ
canvas 要素を用意する
HTML にキャンバスを 1 枚置きます。
<canvas id="canvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
width と height は「描画領域の解像度」です。
CSS の幅・高さとは別なので、最初は HTML 属性で素直に指定しておくのが安全です。
getContext(“2d”) で 2D コンテキストを取得する
JavaScript 側で、キャンバスから 2D コンテキストを取り出します。
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ここで ctx が「2D 描画用のペン箱」です。
この ctx を通して、四角・線・円・文字・画像などを描いていきます。
もし getContext("2d") が null を返したら、
ブラウザが Canvas に対応していないか、ID の指定を間違えている可能性があります。
2D コンテキストの“座標の世界”を理解する
左上が (0, 0)、右が x プラス、下が y プラス
2D コンテキストで描くときは、
必ず「座標」を指定します。
座標のルールはこうです。
左上が (0, 0)
右に行くほど x が増える
下に行くほど y が増える
例えば、幅 300、高さ 200 のキャンバスなら、
左上が (0, 0)
右上が (300, 0)
左下が (0, 200)
右下が (300, 200)
というイメージです。
この座標感覚がないと、
「なんでここに描かれるの？」がずっとモヤモヤします。
四角形で座標感覚をつかむ
2D コンテキストの基本中の基本が fillRect です。
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 40, 120, 80); // x, y, 幅, 高さ
これは「左から 50px、上から 40px の位置に、
幅 120px、高さ 80px の四角形を塗りつぶす」という意味です。
fillRect(x, y, width, height) の x, y は「四角形の左上の座標」です。
この一行だけで、
「座標を指定して図形を置く」という感覚がかなりつかめます。
2D コンテキストでできる基本的な描画
線を描く（パスの基本）
線を描くときは「パス」を使います。
ctx.beginPath(); // 新しい線の描画を開始
ctx.moveTo(20, 20); // ペンを (20, 20) に移動
ctx.lineTo(200, 150); // (200, 150) まで線を引く
ctx.strokeStyle = "green";
ctx.lineWidth = 2;
ctx.stroke(); // 実際に線を描く
beginPath で「これから線を描くよ」と宣言し、moveTo でスタート地点、lineTo でゴール地点を指定します。
最後に stroke() を呼ぶと、線がキャンバスに描かれます。
ここでのポイントは、
「パスを組み立ててから、まとめて描く」という流れです。
円を描く（arc）
円や円弧は arc を使います。
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2); // 中心 x, y, 半径, 開始角度, 終了角度
ctx.fillStyle = "orange";
ctx.fill();
角度はラジアンで指定します。
0 は右方向Math.PI は 180 度（左方向）Math.PI * 2 は 360 度（一周）
なので、円を一周描きたいときは0 から Math.PI * 2 を指定します。
テキストを描く
文字も 2D コンテキストで直接描けます。
ctx.font = "20px sans-serif";
ctx.fillStyle = "black";
ctx.fillText("Hello 2D Context", 50, 50);
fillText(文字列, x, y) で、指定した位置に文字を描きます。strokeText を使えば、枠線だけの文字も描けます。
テキストも座標で置くので、
「どこに文字を置くか」を自分で決められるのが Canvas らしさです。
2D コンテキストの「状態」を意識する
色・線の太さ・フォントは“状態”として保持される
2D コンテキストは、
いろいろな「状態」を内部に持っています。
塗りつぶしの色（fillStyle）
線の色（strokeStyle）
線の太さ（lineWidth）
フォント（font）
線の端の形（lineCap）
など
一度設定すると、その後の描画にずっと効き続けます。
例えば、
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(70, 10, 50, 50); // これも赤になる
のように、2 回目の fillRect でもfillStyle を変えない限り赤のままです。
この「状態が残る」という性質は、
便利でもあり、バグの原因にもなります。
「さっき線を太くしたから、今も太いままだった」
「さっき色を変えたから、次の図形も同じ色になった」
ということが普通に起こるので、
「今のコンテキストの状態はどうなっているか？」
を意識しながら描くのが大事です。
2D コンテキストとアニメーションの基本
clearRect と requestAnimationFrame の組み合わせ
2D コンテキストは「何度でも描き直せる」ことが強みです。
アニメーションの基本パターンはこうです。
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 一度全部消す
ctx.fillStyle = "tomato";
ctx.fillRect(x, 80, 50, 50); // 現在位置に四角を描く
x += 2;
if (x > canvas.width) {
x = -50;
}
requestAnimationFrame(draw); // 次のフレームを予約
}
draw();
ここで重要なのは、
「毎フレームごとに画面を消して、今の状態を描き直す」
という考え方です。
clearRect でキャンバスをクリアし、
現在の座標に応じて図形を描き、requestAnimationFrame で次のフレームを呼ぶ。
このループが、2D コンテキストを使ったアニメーションの基本形です。
初心者として「2D コンテキスト」で本当に掴んでほしいこと
2D コンテキストは、Canvas の世界に入るための入口です。
全部を一気に覚える必要はありません。
まずは次の感覚だけ、しっかり押さえてください。
canvas.getContext("2d") で「描画用のペン箱」を手に入れる。
座標は左上が (0, 0)、右が x プラス、下が y プラス。
四角（fillRect）、線（beginPath / moveTo / lineTo / stroke）、円（arc）、文字（fillText）を一通り描いてみる。
色や線の太さなどは「コンテキストの状態」として残り続ける。
おすすめの練習は、1 枚のキャンバスに
四角
円
線
文字
を全部描いてみることです。
それができたら、
四角を 1 つだけ動かすアニメーションを書いてみてください。
その頃には、2D コンテキストはもう
「よく分からない黒魔術」ではなく、
「自分で画面をデザインできる、素直な道具」
として感じられるようになっているはずです。