電球色の温もりをCanvasで再現する：
合成操作による高速画像処理

1. コンポジット操作による多層フィルタリング

このツールの核心は、JavaScriptによるピクセル操作（getImageData）を一切行わず、GPUによる高速な描画が可能なglobalCompositeOperationのみでフィルタリングを完結させている点にあります。

電球色の質感を出すために、「soft-light」モードで全体のコントラストと色味を馴染ませ、さらに「color」モードで特定の色相成分を微調整する、という2段階の合成を行っています。これにより、写真の明暗差を保ったまま、ハイライトからシャドウまで自然に色が乗る仕組みになっています。

// フィルタリング処理のコンセプト
function applyWarmBulb(ctx, x, y, width, height, intensity) {
    // 1. ソフトライト合成で暖色をなじませる
    ctx.globalCompositeOperation = 'soft-light';
    ctx.globalAlpha = intensity;
    ctx.fillStyle = WARM_COLOR_BASE; // 独自のチューニング色
    ctx.fillRect(x, y, width, height);

    // 2. カラー合成で特定の色相を強調
    ctx.globalCompositeOperation = 'color';
    ctx.globalAlpha = intensity * ADJUST_COEFF; // 補正係数
    ctx.fillStyle = WARM_COLOR_ACCENT; // 独自のアクセント色
    ctx.fillRect(x, y, width, height);
}

2. 解像度依存を排除した仮想キャンバスシステム

モバイル端末での快適な操作を実現するため、内部処理では常に一定の解像度（1000x1000など）を持つ「仮想編集領域」を定義しています。

ユーザーが拡大・縮小やドラッグを行っても、処理対象となるキャンバス自体のサイズは変化させず、画像描画時の座標計算（Transform）のみで対応しています。この設計のメリットは、高解像度な写真であってもプレビューの更新速度が低下せず、常に一定のパフォーマンスを維持できる点にあります。

// 座標計算のブラックボックス化
function calculateDrawTransform(config, image) {
    // 画像の基準ズーム倍率を算出
    const baseScale = Math.max(VIEW_WIDTH / image.width, VIEW_HEIGHT / image.height);
    
    // ユーザー操作（ズーム・移動）に基づいた描画座標の算出
    // ここに複雑なアスペクト比維持と中心点計算のロジックが入ります
    const dx = /* 座標計算処理 */;
    const dy = /* 座標計算処理 */;
    const dw = /* サイズ計算処理 */;
    const dh = /* サイズ計算処理 */;

    return { dx, dy, dw, dh };
}

Developer's Note

画像加工ツールをWebで作る際、最も苦労するのは「スマホでのUX」と「処理の重さ」の両立です。最近はAIによる高度な加工も増えていますが、あえて枯れた技術であるHTML5 Canvasの合成モードを組み合わせることで、オフラインでも爆速で動作し、かつ情緒的な表現を追求しました。

特に「電球色」は、一歩間違えると単に「古い、黄ばんだ写真」に見えてしまいます。それを防ぐために、明るさ補正（lighter/multiply）とコントラスト補正（overlay）を直列に繋ぎ、最後に暖色を乗せるというパイプラインを構築しました。この順序こそが、カフェのライティングのような「エモさ」の正体です。