exp

src/lib/services/picletExport.ts

@@ -10,27 +10,26 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const ctx = canvas.getContext('2d');
   if (!ctx) throw new Error('Could not create canvas context');
   
-  // Set canvas size - narrower width to match content
+  // Set canvas size - narrower width to match content, tighter height
   const canvasWidth = 700;
-  const canvasHeight = 900; // More reasonable height
+  const canvasHeight = 700; // Square format, tighter
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
   
-  // Fill background with solid sky blue
-  ctx.fillStyle = '#87CEEB';
-  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  // Clear canvas for transparency (no background fill)
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
   
   // Load piclet image first
   const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
   const picletSize = 512;
   const picletX = (canvasWidth - picletSize) / 2;
-  const picletY = canvasHeight - picletSize - 100; // Position piclet with bottom margin
+  const picletY = 120; // Position piclet closer to top, leaving room for name
   
   // 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 platformX = (canvasWidth - platformSize) / 2;
-  const platformY = picletY + picletSize - 100; // Platform sits right under piclet
+  const platformY = picletY + picletSize - 200; // Platform overlaps bottom of piclet
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
   // Draw piclet on top of platform
@@ -41,9 +40,9 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   ctx.strokeStyle = '#1e3a8a'; // Dark blue outline
   ctx.lineWidth = 8;
   // Try to use a more gaming-style font, fallback to Impact
-  ctx.font = 'bold 72px "Press Start 2P", "Courier New", Impact, monospace';
+  ctx.font = 'bold 64px "Press Start 2P", "Courier New", Impact, monospace';
   ctx.textAlign = 'center';
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.8)';
   ctx.shadowBlur = 10;
   ctx.shadowOffsetX = 4;
   ctx.shadowOffsetY = 4;
@@ -51,8 +50,8 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const nameText = piclet.nickname || piclet.typeId;
   
   // Draw name with outline and shadow
-  ctx.strokeText(nameText, canvasWidth / 2, 150);
-  ctx.fillText(nameText, canvasWidth / 2, 150);
+  ctx.strokeText(nameText, canvasWidth / 2, 80);
+  ctx.fillText(nameText, canvasWidth / 2, 80);
   
   // Reset shadow
   ctx.shadowColor = 'transparent';