fix

src/lib/services/picletExport.ts

@@ -60,7 +60,7 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const grassImg = await loadImage('/assets/grass.PNG');
   const platformSize = 1200; // Larger than piclet for proper positioning
   const platformX = (canvasWidth - platformSize) / 2;
-  const platformY = picletY + picletSize - 300; // Platform under piclet
+  const platformY = picletY + picletSize - 300 - 384; // Platform moved up by 384px
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
   // Draw piclet on top of platform
@@ -117,9 +117,10 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const containerWidth = canvasWidth - 200;
   const containerHeight = 150;
   
-  // Draw semi-transparent background
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
-  ctx.roundRect(containerX, containerY, containerWidth, containerHeight, 20);
+  // Draw semi-transparent background using the polyfilled roundRect
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+  ctx.beginPath();
+  (ctx as any).roundRect(containerX, containerY, containerWidth, containerHeight, 20);
   ctx.fill();
   
   // Draw stats bars
@@ -144,13 +145,15 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
     // Draw background bar
     const barX = containerX + 120;
     ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-    ctx.roundRect(barX, y - 8, barMaxWidth, barHeight, 8);
+    ctx.beginPath();
+    (ctx as any).roundRect(barX, y - 8, barMaxWidth, barHeight, 8);
     ctx.fill();
     
     // Draw filled bar
     const fillWidth = (stat.value / maxStatValue) * barMaxWidth;
     ctx.fillStyle = stat.color;
-    ctx.roundRect(barX, y - 8, fillWidth, barHeight, 8);
+    ctx.beginPath();
+    (ctx as any).roundRect(barX, y - 8, fillWidth, barHeight, 8);
     ctx.fill();
     
     // Add shine effect
@@ -159,7 +162,8 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
     shineGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.1)');
     shineGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
     ctx.fillStyle = shineGradient;
-    ctx.roundRect(barX, y - 8, fillWidth, barHeight / 2, 8);
+    ctx.beginPath();
+    (ctx as any).roundRect(barX, y - 8, fillWidth, barHeight / 2, 8);
     ctx.fill();
   });