16. Canvas API の使い方：
画像をスタンプのように
扱う技術

1. Canvas API は「プログラムで描く画用紙」

HTML5から導入された Canvas API は、ブラウザでグラフィックを動的に描画するための非常に強力なインターフェースです。通常のHTML要素（DOM）が「文書の構造」を定義するのに対し、Canvasは「ピクセルの集まり」を直接操作します。

猫の手ツールの証明写真作成機能では、画面に表示されないメモリ上の仮想Canvasを作成し、そこにユーザーがアップロードした画像をトリミングして配置しています。これはいわば、暗室で印画紙に写真を焼き付けるような作業を、JavaScriptの命令だけで完結させているのです。

2. drawImage() 命令：最強のスタンプ

Canvasで画像を扱う際、最も多用するのが drawImage() メソッドです。このメソッドは引数の数によって役割が変わりますが、最もリッチな「9つの引数」を持つバージョンを使うことで、「トリミング」と「リサイズ配置」を一度に実行できます。

引数の意味を解剖する

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• sx, sy, sWidth, sHeight：元画像のどの部分を切り抜くか（Source）
• dx, dy, dWidth, dHeight：画用紙のどこに、どのサイズで描画するか（Destination）

【具体例】プリントシートに2枚並べるコード

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

// 画用紙のサイズを設定（例：A4相当の比率）
canvas.width = 1200;
canvas.height = 1600;

// 1枚目を左上に配置（余白100px、幅400px）
ctx.drawImage(userImage, 0, 0, userWidth, userHeight, 100, 100, 400, 500);

// 2枚目をその横に配置（X座標を550pxにずらす）
ctx.drawImage(userImage, 0, 0, userWidth, userHeight, 550, 100, 400, 500);

3. 実装の落とし穴：非同期処理とボケ問題

Canvasを扱う上で、初心者が必ずと言っていいほどハマるポイントが2つあります。

1. 画像の読み込み待ち（Image.onload）

JavaScriptで new Image() を作成した直後に描画命令を出しても、画像は表示されません。データの読み込みが完了する前に「スタンプ」を押そうとしているからです。必ず onload イベントを待機するか、現代的な開発では Promise を使って非同期制御を行う必要があります。

2. 高解像度ディスプレイでの「ボケ」

Retinaディスプレイなどの高画素密度環境では、Canvasがぼやけて見えることがあります。これは、ブラウザの論理ピクセルと画面の物理ピクセルに乖離があるためです。

解決策として、window.devicePixelRatio に合わせてCanvas自体の解像度を2倍、3倍に設定し、CSSで表示サイズを調整するテクニックが必要です。これを怠ると、せっかくの証明写真が眠たい画質になってしまいます。

4. 実務での活用シーン：インフラ図からバナー生成まで

Canvas APIのスキルは、画像加工ツール以外でも非常に重宝されます。

• 動的なOGP生成： ブログ記事のタイトルを画像に合成して、SNSシェア用のバナーを自動生成する。
• ネットワーク図の描画： インフラ構成をコードから動的に視覚化する。座標計算の感覚は、ネットワークトポロジを描く際の論理的な思考と非常に似ています。
• データビジュアライゼーション： 大量のデータをブラウザに負荷をかけずにグラフ化する（DOM要素を数万個作るよりCanvasの方が遥かに高速です）。

まとめ

最初は座標（X, Y）の計算に頭を悩ませましたが、数学的にピクセルを配置していく作業は、パズルを解くような楽しさがあります。

Canvas APIをマスターすることは、ブラウザというプラットフォームを「閲覧ツール」から「制作ツール」へと進化させる鍵となります。猫の手ツールにおいて、この drawImage() が生み出すピクセルの魔法は、今も静かにユーザーの「面倒くさい」を解決し続けています。