bkgrd

src/lib/services/picletExport.ts

@@ -16,8 +16,22 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
   
-  // Clear canvas for transparency (no background fill)
-  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  // Fill with striped background like battle view
+  ctx.fillStyle = '#f8f9fa';
+  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  
+  // Create striped pattern
+  const stripeHeight = 10;
+  ctx.fillStyle = 'rgba(76, 175, 80, 0.2)'; // Light green
+  for (let y = 0; y < canvasHeight; y += stripeHeight * 2) {
+    ctx.fillRect(0, y, canvasWidth, stripeHeight);
+  }
+  
+  // Add alternating darker stripes
+  ctx.fillStyle = 'rgba(76, 175, 80, 0.1)'; // Lighter green
+  for (let y = stripeHeight; y < canvasHeight; y += stripeHeight * 2) {
+    ctx.fillRect(0, y, canvasWidth, stripeHeight);
+  }
   
   // Load piclet image first
   const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
@@ -27,9 +41,9 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   
   // Load and draw grass platform positioned under the piclet
   const grassImg = await loadImage('/assets/grass.PNG');
-  const platformSize = picletSize + 100; // Slightly larger than piclet
+  const platformSize = 1024; // Slightly larger than piclet
   const platformX = (canvasWidth - platformSize) / 2;
-  const platformY = picletY;
+  const platformY = picletY + 512;
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
   // Draw piclet on top of platform