Apply multiply blend mode to remove white product background in canvas

app.js

@@ -496,19 +496,20 @@ async function render3DCommercialPoster(canvas, productImg, title, price) {
   strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy);
 
   // 4. Hero Product Scaling & Placement
-  const targetH = 550;
-  const targetW = 540;
-  const srcW = productImg.width;
-  const srcH = productImg.height;
+  const targetH = 500;
+  const targetW = 520;
+  const srcW = productImg.width || 500;
+  const srcH = productImg.height || 500;
   const scale = Math.min(targetW / srcW, targetH / srcH);
   const destW = srcW * scale;
   const destH = srcH * scale;
   const destLeft = (w - destW) / 2;
   const destTop = topTierY - destH + 18;
 
-  // 4.1 Glossy Mirror Product Reflection
+  // 4.1 Glossy Mirror Product Reflection (Multiply blended)
   ctx.save();
-  ctx.globalAlpha = 0.20;
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.globalAlpha = 0.25;
   ctx.translate(0, (topTierY + 6) * 2);
   ctx.scale(1, -1);
   ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35);
@@ -521,8 +522,11 @@ async function render3DCommercialPoster(canvas, productImg, title, price) {
   ctx.fillStyle = contactShadow;
   drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12);
 
-  // Draw Hero Product
+  // Draw Hero Product with Multiply Blend Mode (removes white background completely)
+  ctx.save();
+  ctx.globalCompositeOperation = 'multiply';
   ctx.drawImage(productImg, destLeft, destTop, destW, destH);
+  ctx.restore();
 
   // 5. Value Trust Badges
   drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true);

index.html

@@ -306,7 +306,7 @@
   <!-- Hidden container for generating QR code SVG/Canvas -->
   <div id="qrcodeHidden" style="display:none;"></div>
 
-  <script src="app.js?v=3"></script>
+  <script src="app.js?v=4"></script>
   <script>
     if ('serviceWorker' in navigator) {
       window.addEventListener('load', () => {