perf: cache emoji artwork during rendering

src/render.ts

@@ -4,6 +4,7 @@ type RenderContext = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2
 export type WallpaperSymbol = CanvasImageSource | string;
 
 let noiseTile: HTMLCanvasElement | undefined;
+const emojiTiles = new Map<string, HTMLCanvasElement>();
 
 function getNoiseTile(): HTMLCanvasElement {
   if (noiseTile) return noiseTile;
@@ -52,6 +53,32 @@ function drawBackground(context: RenderContext, width: number, height: number):
   }
 }
 
+function emojiTile(symbol: string, targetSize: number, highQuality: boolean): HTMLCanvasElement {
+  const requestedSize = highQuality ? Math.max(256, Math.min(2048, 2 ** Math.ceil(Math.log2(targetSize * 1.25)))) : 256;
+  const key = `${symbol}:${requestedSize}`;
+  const cached = emojiTiles.get(key);
+  if (cached) return cached;
+
+  const tile = document.createElement("canvas");
+  tile.width = requestedSize;
+  tile.height = requestedSize;
+  const context = tile.getContext("2d", { alpha: true });
+  if (!context) throw new Error("Could not create emoji tile");
+  context.font = `${requestedSize * 0.88}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
+  context.fillStyle = "#ffffff";
+  context.textAlign = "center";
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText(symbol);
+  const visualCenter = (metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) * 0.5;
+  context.fillText(symbol, requestedSize * 0.5, requestedSize * 0.5 + visualCenter, requestedSize);
+  emojiTiles.set(key, tile);
+  if (emojiTiles.size > 4) {
+    const oldestKey = emojiTiles.keys().next().value;
+    if (oldestKey) emojiTiles.delete(oldestKey);
+  }
+  return tile;
+}
+
 export function renderWallpaper(
   context: RenderContext,
   width: number,
@@ -66,6 +93,11 @@ export function renderWallpaper(
 
   const unit = Math.min(width, height);
   const drawSoftShadows = highQuality || placements.length / PLACEMENT_STRIDE <= 240;
+  let maxSymbolWidth = 1;
+  for (let offset = 2; offset < placements.length; offset += PLACEMENT_STRIDE) {
+    maxSymbolWidth = Math.max(maxSymbolWidth, (placements[offset] ?? 0) * unit);
+  }
+  const artwork = typeof symbol === "string" ? emojiTile(symbol, maxSymbolWidth, highQuality) : symbol;
   for (let offset = 0; offset < placements.length; offset += PLACEMENT_STRIDE) {
     const x = (placements[offset] ?? 0) * unit;
     const y = (placements[offset + 1] ?? 0) * unit;
@@ -79,16 +111,7 @@ export function renderWallpaper(
       context.shadowBlur = Math.max(2, logoWidth * 0.035);
       context.shadowOffsetY = Math.max(2, logoWidth * 0.032);
     }
-    if (typeof symbol === "string") {
-      context.font = `${logoWidth * 0.88}px "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif`;
-      context.textAlign = "center";
-      context.textBaseline = "alphabetic";
-      const metrics = context.measureText(symbol);
-      const visualCenter = ((metrics.actualBoundingBoxAscent ?? logoWidth * 0.7) - (metrics.actualBoundingBoxDescent ?? logoWidth * 0.15)) * 0.5;
-      context.fillText(symbol, 0, visualCenter, logoWidth);
-    } else {
-      context.drawImage(symbol, -logoWidth * 0.5, -logoWidth * 0.5, logoWidth, logoWidth);
-    }
+    context.drawImage(artwork, -logoWidth * 0.5, -logoWidth * 0.5, logoWidth, logoWidth);
     context.restore();
   }
 }