「描画処理」は“毎回、画面をどうやって作るか”を決めること
Canvas API の世界でいう「描画処理」は、
ざっくり言うと
「キャンバスという白い紙に、
どの順番で、何を、どこに、どういう見た目で描くか」
をコードで表現することです。
HTML の通常の要素は「配置したらブラウザが勝手に描いてくれる」のに対して、
Canvas は「自分で全部描く」世界です。
だからこそ、描画処理をきちんと組み立てられると、
ゲーム画面、グラフ、ビジュアライゼーション、お絵かきツールなど、
かなり自由度の高い表現ができるようになります。
描画処理の基本フローをまず押さえる
1 枚のキャンバスと 2D コンテキストを用意する
HTML にキャンバスを置きます。
<canvas id="canvas" width="400" height="250" style="border:1px solid #ccc;"></canvas>
JavaScript で 2D コンテキスト（描画用のペン箱）を取得します。
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
ここまでが「描く準備」です。
以降は、すべて ctx に対して命令を出していきます。
「何を描くか」を 1 つの関数にまとめてみる
描画処理は、関数にまとめておくと考えやすくなります。
function draw() {
// ここに「この画面をどう描くか」を全部書く
}
静的な画面なら draw() を一度呼べば終わりですし、
アニメーションなら draw() を何度も呼び直します。
「画面を作るレシピ」を draw 関数に閉じ込めるイメージです。
基本の描画処理：四角・円・線・文字を組み合わせる
四角を描く
function drawRectangles() {
ctx.fillStyle = "skyblue";
ctx.fillRect(20, 20, 120, 80);
ctx.fillStyle = "tomato";
ctx.fillRect(160, 40, 80, 60);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.strokeRect(260, 30, 100, 90);
}
ここで意識してほしいのは、「描く順番」です。
Canvas は「後から描いたものが手前に重なる」ので、
どの順番で fillRect や strokeRect を呼ぶかで見た目が変わります。
円と線を描く
function drawCircleAndLine() {
ctx.beginPath();
ctx.arc(80, 170, 40, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();
ctx.beginPath();
ctx.moveTo(160, 150);
ctx.lineTo(300, 200);
ctx.strokeStyle = "green";
ctx.lineWidth = 3;
ctx.stroke();
}
beginPath で「新しい線・形の描画を始める」と宣言し、arc や moveTo / lineTo で形を作り、
最後に fill や stroke で実際に描きます。
ここでも「どの順番で描くか」が重要です。
先に円を描いてから線を描くのか、逆なのかで、
どちらが手前に見えるかが変わります。
文字を描く
function drawText() {
ctx.font = "20px sans-serif";
ctx.fillStyle = "black";
ctx.fillText("Canvas Drawing", 150, 30);
}
文字も「描画処理の一部」です。
図形と文字を組み合わせることで、
ラベル付きの図や簡単な UI も作れます。
すべてをまとめて 1 回描いてみる
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRectangles();
drawCircleAndLine();
drawText();
}
draw();
clearRect で一度キャンバスを真っさらにしてから、
「この画面に必要なもの」を順番に描いていきます。
この「消してから全部描き直す」という感覚は、
静的な画面でもアニメーションでも、とても大事です。
描画処理で一番大事な「座標」と「順番」の感覚
座標は「どこに何を置くか」のすべての基準
Canvas の描画処理は、
すべて座標で場所を指定します。
四角なら左上の (x, y)
円なら中心の (x, y)
線なら始点と終点の (x1, y1) と (x2, y2)
文字なら描き始めの (x, y)
この「どこに置くか」を自分で決めるのが、
Canvas の楽しさでもあり、最初のハードルでもあります。
おすすめは、
最初はざっくり「このへん」と感覚で置いてみて、
少しずつ数字を変えながら「ここが x、ここが y か」と
体で覚えていくことです。
描画順は「レイヤー」のように効いてくる
Canvas には「レイヤー」という概念はありませんが、
「後から描いたものが手前に来る」というルールがあります。
例えば、次の 2 パターンを比べてみてください。
// パターンA：先に四角、あとで文字
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 200, 100);
ctx.fillStyle = "black";
ctx.font = "24px sans-serif";
ctx.fillText("Hello", 100, 110);
// パターンB：先に文字、あとで四角
ctx.fillStyle = "black";
ctx.font = "24px sans-serif";
ctx.fillText("Hello", 100, 110);
ctx.fillStyle = "skyblue";
ctx.fillRect(50, 50, 200, 100);
パターンAでは「水色の四角の上に文字」が乗りますが、
パターンBでは「文字の上に四角」がかぶさって見えなくなります。
描画処理を書くときは、
「どの順番で重ねたいか」を意識してコードの順番を決めることが重要です。
アニメーションにおける描画処理の考え方
「状態」と「描画」を分けて考える
アニメーションでは、
「今どういう状態か」と「その状態をどう描くか」を
分けて考えると整理しやすくなります。
例えば、横に動く丸のアニメーションを考えます。
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
let x = 0; // 丸の現在位置（状態）
const y = 120;
const radius = 30;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = "tomato";
ctx.fill();
x += 2; // 状態を更新
if (x - radius > canvas.width) {
x = -radius;
}
requestAnimationFrame(draw);
}
draw();
ここでのポイントは、
状態（x, y, radius）を変数で持つ
描画処理（clearRect → arc → fill）は状態をもとに毎回同じように描く
状態だけを少しずつ変えていく
という構造になっていることです。
描画処理は「今の状態を画面に反映する仕事」だと捉えると、
アニメーションのコードが一気に整理されます。
初心者として「描画処理」で本当に掴んでほしいこと
描画処理は、難しいテクニックの集合ではありません。
本質は、次の 4 つです。
どのキャンバスに描くかを決める（getContext("2d")）。
どこに何を描くかを座標で決める。
どの順番で重ねるかをコードの順番で決める。
必要なら毎フレーム「消してから描き直す」。
まずは、次のような練習をしてみてください。
一枚のキャンバスに、四角・円・線・文字を自分なりのレイアウトで描く。
そのうち一つ（例えば円）だけを横に動かすアニメーションを書いてみる。
ここまでできると、
「描画処理」はもうただの難しそうな言葉ではなく、
“自分で画面を組み立てるためのレシピを書くこと”
として、かなり手触りよく感じられるはずです。