JavaScript | Web API：グラフィック・メディア － Canvas API

Canvas API は「ブラウザの中にあるお絵かき用の白い紙」

Canvas API は、HTML の <canvas> 要素と JavaScript を使って
図形・文字・画像・アニメーションなどを「ピクセル単位」で描くための仕組みです。

普通の HTML は「ボタン」「テキスト」「画像」など“部品”を並べるイメージですが、
Canvas は「真っ白なキャンバスに、ペンで自由に描く」イメージです。

ゲーム画面、グラフ、ビジュアライゼーション、簡単なお絵かきツールなど、
「自分で画面を描きたい」ときに使うのが Canvas API です。

まずは最小の Canvas を動かしてみる

HTML に canvas を置く

最初に、HTML にキャンバスを 1 枚置きます。

<canvas id="canvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>

width と height がキャンバスの解像度です。
CSS の幅・高さとは別物なので、最初は HTML 属性で素直に指定しておくのがおすすめです。

JavaScript から「描くためのペン」を取り出す

Canvas に描くときは、まず「コンテキスト」と呼ばれる“ペン”を取り出します。

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

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

ctx が「2D 描画用のペン」です。
以降は、この ctx に対して「線を引け」「四角を塗れ」などと命令していきます。

基本中の基本：四角形を描いてみる

塗りつぶしの四角形（fillRect）

一番シンプルな命令は fillRect です。

ctx.fillStyle = "skyblue";      // 塗りつぶしの色を指定
ctx.fillRect(50, 40, 120, 80);  // x, y, 幅, 高さ

ctx.fillStyle = "skyblue";      // 塗りつぶしの色を指定
ctx.fillRect(50, 40, 120, 80);  // x, y, 幅, 高さ

これで、左から 50px、上から 40px の位置に
幅 120px、高さ 80px の水色の四角形が描かれます。

ここで重要なのは座標の考え方です。

キャンバスの左上が (0, 0)
右に行くほど x が増える
下に行くほど y が増える

というルールになっています。

fillRect(x, y, width, height) の x, y は「左上の位置」です。
この座標感覚は、Canvas を触るうえで超重要なので、最初にしっかり掴んでおいてください。

枠線だけの四角形（strokeRect）

塗りつぶしではなく、枠線だけ描きたいときは strokeRect を使います。

ctx.strokeStyle = "red";        // 線の色
ctx.lineWidth = 4;              // 線の太さ
ctx.strokeRect(30, 20, 160, 100);

ctx.strokeStyle = "red";        // 線の色
ctx.lineWidth = 4;              // 線の太さ
ctx.strokeRect(30, 20, 160, 100);

fillRect と同じく、左上の座標と幅・高さを指定しますが、
描かれるのは「枠線だけ」です。

円や線も描いてみる

線を引く基本パターン

線を描くときは「パス」を使います。

ctx.beginPath();        // 新しい線の描画を開始
ctx.moveTo(20, 20);     // ペンを (20, 20) に移動
ctx.lineTo(200, 150);   // (200, 150) まで線を引く
ctx.strokeStyle = "green";
ctx.lineWidth = 2;
ctx.stroke();           // 実際に線を描く

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();

ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);  // 中心 x, y, 半径, 開始角度, 終了角度
ctx.fillStyle = "orange";
ctx.fill();

ここでのポイントは角度の単位です。
Canvas の角度は「度」ではなく「ラジアン」です。

0 は右方向
Math.PI は 180 度（左方向）
Math.PI * 2 は 360 度（ぐるっと一周）

なので、円を一周描きたいときは
0 から Math.PI * 2 まで指定します。

テキストを描く

文字をキャンバスに直接描く

Canvas には、テキストを描くためのメソッドもあります。

ctx.font = "20px sans-serif";   // フォントサイズとフォント
ctx.fillStyle = "black";
ctx.fillText("Hello Canvas", 60, 50);  // 文字列, x, y

ctx.font = "20px sans-serif";   // フォントサイズとフォント
ctx.fillStyle = "black";
ctx.fillText("Hello Canvas", 60, 50);  // 文字列, x, y

fillText は「塗りつぶし文字」、
strokeText は「枠線だけの文字」です。

ctx.strokeStyle = "blue";
ctx.lineWidth = 1;
ctx.strokeText("Outline Text", 60, 80);

ctx.strokeStyle = "blue";
ctx.lineWidth = 1;
ctx.strokeText("Outline Text", 60, 80);

テキストも、座標は「左下あたり」が基準になります。
細かい位置調整は textBaseline などで変えられますが、
最初は「だいたいこのへん」と感覚で置いてみるところからで大丈夫です。

画像を描く

画像を読み込んでキャンバスに貼る

Canvas は、画像ファイルを読み込んで貼り付けることもできます。

HTML:

<canvas id="canvas" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<img id="source" src="sample.png" alt="" style="display:none;">

JavaScript:

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const img = document.querySelector("#source");

img.addEventListener("load", () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const img = document.querySelector("#source");

img.addEventListener("load", () => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
});

drawImage は、画像をキャンバスに描画するメソッドです。
ここではキャンバス全体に引き伸ばして描いています。

画像は読み込みに時間がかかるので、
load イベントの中で drawImage を呼ぶのがポイントです。

ちょっとだけアニメーションに踏み込んでみる

requestAnimationFrame で「毎フレーム描き直す」

Canvas の真骨頂は「毎フレーム描き直す」ことです。
ゲームや動くグラフなどは、
1 秒間に何十回も画面を描き直しています。

基本パターンはこうです。

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();

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();

ここで重要なのは次の流れです。

画面をクリアする
現在の状態に応じて描く
状態を少し変える（x を増やすなど）
requestAnimationFrame で次のフレームを予約する

このループが「アニメーションの基本形」です。

最初は「四角が横に動くだけ」で十分です。
それが理解できれば、あとは「何をどう動かすか」の発想勝負になります。

初心者として Canvas API で本当に掴んでほしいこと

Canvas API は機能が多くて、全部を一気に覚える必要はありません。
まずは次の 4 つだけ、しっかり体に入れてください。

<canvas> を置いて getContext("2d") でペンを取る。
座標は左上が (0, 0)、右が x プラス、下が y プラス。
四角（fillRect）、線（moveTo / lineTo / stroke）、円（arc）、文字（fillText）を描いてみる。
requestAnimationFrame で「消して描き直す」を繰り返すとアニメーションになる。

おすすめの練習は、次の順番です。

一枚のキャンバスに、四角・円・線・文字を全部描いてみる。
四角を 1 つだけ動かす簡単なアニメーションを書いてみる。

ここまでできると、
Canvas はもう「謎の難しい API」ではなく、
「自分で画面をデザインできるお絵かきツール」に見えてきます。

そこから先は、
「何を描きたいか」を決めて、
少しずつコードで表現していくだけです。