キャンバスの世界へようこそ

このシリーズでは、ほんの数行のコードで美しいビジュアルを生み出すビジュアルコーディングを学びます。難しい数学もライブラリも不要です。ブラウザだけで動く、JavaScriptと Canvas要素? HTMLの`<canvas>`要素は、JavaScriptで2D/3Dグラフィックスを描画するための画面領域。ピクセル単位で自由に描画でき、ゲームやビジュアルアートに使われる。 だけで始めましょう。

「短いコードなのに、なぜあんなにかっこいい絵が出るのか」——その謎を一緒に解いていきます。

Canvas とは何か

Canvas要素? HTMLの`<canvas>`要素は、JavaScriptで2D/3Dグラフィックスを描画するための画面領域。ピクセル単位で自由に描画でき、ゲームやビジュアルアートに使われる。 は、HTMLに用意されている「白紙の絵キャンバス」です。

<canvas id="c" width="600" height="300"></canvas>

このタグを書くだけで、ブラウザ上に600×300ピクセルの描画領域が生まれます。ここにJavaScriptで命令を送ることで、線・円・グラデーションなど、あらゆる図形を自由に描けます。

描画コンテキストを取得する

実際に描くには、まず描画コンテキスト（ctx）を取得します。これはキャンバスへの「筆」にあたるオブジェクトです。

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

getContext('2d') で2D描画用のコンテキストが返ってきます。以降は ctx.○○ という形でさまざまな描画命令を呼び出します。

W・H 変数の慣習

ビジュアルコーディングでは、キャンバスの幅と高さを W と H という短い変数名に入れておくのが慣習です。

const W = canvas.width;   // 幅（例: 600）
const H = canvas.height;  // 高さ（例: 300）

こうしておくと、「中央に描く」「端まで繰り返す」といった計算が短く書けます。このシリーズでは、すべてのデモでこの変数が使えるようになっています。

座標系を理解する

座標系? Canvas上の位置を(x, y)の数値ペアで表す仕組み。左上が原点(0,0)でxは右向き、yは下向きに増加する（数学の座標系とy軸が逆）。 では、位置を (x, y) の2つの数値で表します。

• 左上が原点 (0, 0)
• x 軸は右向きに増加
• y 軸は下向きに増加

(0,0) ─────────────────── x →
  │
  │     (100, 80) ← この点の意味:
  │         右に100、下に80の位置
  y
  ↓

数学の座標系とはy軸の向きが逆なので、最初は少し戸惑うかもしれません。「下に行くほど y が大きくなる」と覚えておきましょう。

最初の四角形を描く

ctx.fillRect(x, y, width, height) は、指定した位置に塗りつぶした四角形を描きます。

ctx.fillStyle = '#00e5ff';          // 色を指定（シアン）
ctx.fillRect(50, 50, 200, 100);    // (50, 50) から 幅200 × 高さ100

• fillStyle — 塗り色を指定する。コードを実行する前にセットする
• fillRect — 指定した位置・サイズの塗りつぶし四角形を描く

実際に動くデモで確認してみましょう。

ctx.fillStyle = '#00e5ff';
ctx.fillRect(50, 50, 200, 100);

複数の四角形を重ねる

fillStyle を変えながら fillRect を繰り返せば、複数の図形を描けます。後から描いた図形は上に重なります。

ctx.fillStyle = '#ff6b6b';
ctx.fillRect(10, 10, 200, 130);

ctx.fillStyle = '#4ecdc4';
ctx.fillRect(W / 2 - 100, H / 2 - 65, 200, 130);

ctx.fillStyle = '#95e67d';
ctx.fillRect(W - 210, H - 140, 200, 130);

左上・中央・右下に配置しました。W と H を使うと、キャンバスのサイズが変わっても位置が自動で調整されます。

色の指定方法

fillStyle には複数の形式で色を指定できます。

ビジュアルコーディングでは HSL が圧倒的に使いやすいです。色相（H）を0〜360の数値で変えるだけで虹のようなグラデーションが作れるからです。

// 色相を 0〜360 で変えると色が変わる
ctx.fillStyle = 'hsl(0,   80%, 60%)';  // 赤
ctx.fillStyle = 'hsl(120, 80%, 60%)';  // 緑
ctx.fillStyle = 'hsl(240, 80%, 60%)';  // 青

HSLグラデーションバーを描いてみる

色相を x 座標から計算して、横方向にグラデーションを作ってみます。

for (var x = 0; x < W; x += 40) {
  var hue = (x / W) * 360;           // x位置を0〜360に変換
  ctx.fillStyle = 'hsl(' + hue + ', 80%, 55%)';
  ctx.fillRect(x, 0, 40, H);
}

for (var x = 0; x < W; x += 40) {
var hue = (x / W) * 360;
ctx.fillStyle = 'hsl(' + hue + ', 80%, 55%)';
ctx.fillRect(x, 0, 40, H);
}

たった3行のループで、虹色のグラデーションが完成しました。これがビジュアルコーディングの醍醐味です。

背景色を設定する

デフォルトのキャンバス背景は白です。暗い背景にしたいときは、最初に fillRect で全体を塗りつぶします。

// 背景を黒く塗りつぶす
ctx.fillStyle = '#0d1117';
ctx.fillRect(0, 0, W, H);

// その上に図形を描く
ctx.fillStyle = '#00e5ff';
ctx.fillRect(50, 50, 100, 100);

(0, 0) から (W, H) の全体を塗りつぶすのが定番の書き方です。このシリーズのデモはすべてダーク背景を採用しています。

まとめ

この回でやったこと：

• canvas 要素と getContext('2d') で 描画コンテキスト? canvasに描画するための命令セット。`canvas.getContext("2d")`で取得し、`ctx.fillRect()`や`ctx.arc()`などのメソッドで図形を描く。 を取得した
• 座標系? Canvas上の位置を(x, y)の数値ペアで表す仕組み。左上が原点(0,0)でxは右向き、yは下向きに増加する（数学の座標系とy軸が逆）。 は左上が原点、y軸は下向きと理解した
• fillStyle と fillRect で色付きの四角形を描いた
• HSL? 色相(Hue 0〜360)・彩度(Saturation)・明度(Lightness)で色を指定する方式。ループ変数から色相を計算しやすく、ビジュアルコーディングで多用される。 を使うと数学計算と色が自然につながることを確認した

次回は for ループを使って繰り返し描画し、より複雑なパターンを作ります。ループとキャンバスの組み合わせだけで、驚くほどリッチなビジュアルが生まれます。