Step 3: Core Technology

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

ブラウザ上の「見えない画用紙」に画像を描く。このツールの心臓部である画像合成の仕組みを学んだ記録です。

Canvas はプログラムで描ける画用紙

ブラウザで画像を自由に切り取ったり並べたりするために、Canvas API を使いました。これは画面上に直接絵を描くのではなく、メモリ上の「仮想的な画用紙」にJavaScriptから命令を出して画像を配置していく技術です。

drawImage() という強力なスタンプ

一番使ったのが drawImage() 命令です。これ一つで「元の画像のここからここまでを、画用紙のここに、このサイズで描く」というトリミングとリサイズの同時実行が可能です。

// 6枚並べるプリントシートを作る時のイメージ
const ctx = canvas.getContext('2d');

// 1枚目を左上に配置
ctx.drawImage(croppedImage, 100, 100, 300, 400);

// 2枚目をその横に配置
ctx.drawImage(croppedImage, 450, 100, 300, 400);

座標計算（X軸とY軸）に最初は少し苦戦しましたが、数学的にピクセルを配置していく感覚は、インフラのネットワーク図を引く作業にどこか似ていて、コツを掴むと非常に快感でした。