ブラウザで実現する「光る太いフチ」の
高度な描画アルゴリズム

1. シルエット・オフセット法による「太いフチ」の生成

Canvas APIには標準的な stroke() メソッドがありますが、複雑な形状の切り抜き画像に対して「外側に太い均一なフチ」を付けるには不十分です。本ツールでは、AIが生成したマスク画像をネオンカラーで塗りつぶし、それを全方位にわずかにずらして重ね描きする「シルエット・オフセット法」を採用しています。

この手法のメリットは、画像の輪郭がどれほど複雑であっても、アンチエイリアスを保ったまま「芯のある太い線」を確実に描画できる点にあります。

// 独自の太いフチ（芯）を作るロジックの概要
function drawThickBorder(ctx, silhouette, width) {
  if (width <= 0) return;

  // 描画間隔を計算（処理負荷と精度のバランスを調整）
  const step = // 独自のチューニング値を用いた動的ステップ計算;

  // 全方位（円状）にシルエットをずらして描画を繰り返す
  for (let angle = 0; angle < 360; angle += step) {
    const rad = angle * Math.PI / 180;
    const dx = Math.cos(rad) * width;
    const dy = Math.sin(rad) * width;
    
    // オフセット位置に描画
    ctx.drawImage(silhouette, dx, dy);
  }
}

2. 多重スタック・シャドウによる「爆光ネオン」エフェクト

単一の shadowBlur だけでは、発光感が弱く、デジタルなネオン管のような質感を出すのが困難です。そこで、同一のシルエットに対して「影の描画処理を何度も重ね掛けする」というスタック描画アルゴリズムを実装しています。

これにより、中心部は非常に明るく、外側に向かってふんわりと光が減衰していく「グロウ効果」をブラウザ上でシミュレートしています。globalCompositeOperation を活用し、人物レイヤーと光彩レイヤーの重なり順を制御することで、光が人物の背後から溢れ出しているような視覚効果を生んでいます。

// 複数の影を重ねて光を強調するアルゴリズム
function applyGlowEffect(ctx, silhouette, color, blur, intensity) {
  ctx.shadowColor = color;
  ctx.shadowBlur = blur;
  
  // 指定された強度（インテンシティ）の分だけ同じ位置に重ね描き
  for(let i = 0; i < intensity; i++) {
    // ここでシルエット画像を同一座標に描画し、影を重畳させる
    // これにより、単純な描画よりも彩度と輝度が高い「光」が生まれる
    ctx.drawImage(silhouette, 0, 0);
  }
  
  // 描画後の状態リセット
  ctx.shadowColor = 'transparent';
  ctx.shadowBlur = 0;
}

Developer's Note

もっともこだわったのは、「高度なAI処理をいかにしてクライアントサイド（ユーザーのデバイス）だけで完結させるか」という点です。MediaPipeの SelfieSegmenter を WebAssembly (WASM) で動かすことで、プライバシーを完全に守りつつ、1500px 級の画像でも数秒で処理できるパフォーマンスを確保しました。

また、Canvasでの描画は非常に高速ですが、iOSの一部のブラウザではフィルタ処理が不安定になるバグがあります。これを回避するために、あえて filter プロパティに頼らず、オフスクリーンキャンバス上での合成と clearRect によるメモリ管理を徹底するなど、エンジニアとしての泥臭い最適化を数多く施しています。