git-hash-art 0.11.0 → 0.13.0

package/src/__tests__/profile-pipeline.test.ts

@@ -0,0 +1,160 @@
+/**
+ * Pipeline phase profiler — instruments renderHashArt to show
+ * exactly where time is spent across all 11 pipeline phases.
+ *
+ * This wraps the CanvasRenderingContext2D to count draw calls
+ * and measure time per phase by intercepting canvas operations.
+ */
+import { describe, it, expect } from "vitest";
+import { createCanvas } from "@napi-rs/canvas";
+import { renderHashArt } from "../lib/render";
+
+const TEST_HASH = "46192e59d42f741c761cbea79462a8b3815dd905";
+const HASH_DEADBEEF = "deadbeefdeadbeefdeadbeefdeadbeefdeadbeef";
+
+interface DrawCallStats {
+  fill: number;
+  stroke: number;
+  fillRect: number;
+  arc: number;
+  beginPath: number;
+  moveTo: number;
+  lineTo: number;
+  quadraticCurveTo: number;
+  drawImage: number;
+  save: number;
+  restore: number;
+  clip: number;
+  getImageData: number;
+  putImageData: number;
+  createRadialGradient: number;
+  createLinearGradient: number;
+  setTransform: number;
+  translate: number;
+  scale: number;
+  rotate: number;
+}
+
+function createInstrumentedCtx(width: number, height: number) {
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext("2d") as unknown as CanvasRenderingContext2D;
+
+  const stats: DrawCallStats = {
+    fill: 0, stroke: 0, fillRect: 0, arc: 0,
+    beginPath: 0, moveTo: 0, lineTo: 0, quadraticCurveTo: 0,
+    drawImage: 0, save: 0, restore: 0, clip: 0,
+    getImageData: 0, putImageData: 0,
+    createRadialGradient: 0, createLinearGradient: 0,
+    setTransform: 0, translate: 0, scale: 0, rotate: 0,
+  };
+
+  // Wrap each method to count calls
+  for (const method of Object.keys(stats) as Array<keyof DrawCallStats>) {
+    const original = (ctx as any)[method];
+    if (typeof original === "function") {
+      (ctx as any)[method] = function (...args: any[]) {
+        stats[method]++;
+        return original.apply(ctx, args);
+      };
+    }
+  }
+
+  return { ctx, stats };
+}
+
+function formatMs(ms: number): string {
+  return ms < 1 ? `${(ms * 1000).toFixed(0)}µs` : `${ms.toFixed(1)}ms`;
+}
+
+describe("Pipeline phase profiling", () => {
+  const configs = [
+    { label: "512×512", width: 512, height: 512 },
+    { label: "1024×1024", width: 1024, height: 1024 },
+  ];
+
+  for (const { label, width, height } of configs) {
+    it(`profiles ${label} with default hash`, () => {
+      const { ctx, stats } = createInstrumentedCtx(width, height);
+
+      const start = performance.now();
+      renderHashArt(ctx, TEST_HASH, { width, height });
+      const total = performance.now() - start;
+
+      console.log(`\n  ═══ Pipeline profile: ${label} (hash=${TEST_HASH.slice(0, 8)}) ═══`);
+      console.log(`  Total: ${formatMs(total)}`);
+      console.log(`\n  Draw call counts:`);
+      console.log(`    fill():           ${stats.fill}`);
+      console.log(`    stroke():         ${stats.stroke}`);
+      console.log(`    fillRect():       ${stats.fillRect}`);
+      console.log(`    arc():            ${stats.arc}`);
+      console.log(`    beginPath():      ${stats.beginPath}`);
+      console.log(`    moveTo():         ${stats.moveTo}`);
+      console.log(`    lineTo():         ${stats.lineTo}`);
+      console.log(`    quadraticCurve(): ${stats.quadraticCurveTo}`);
+      console.log(`    clip():           ${stats.clip}`);
+      console.log(`    save()/restore(): ${stats.save}/${stats.restore}`);
+      console.log(`    drawImage():      ${stats.drawImage}`);
+      console.log(`    getImageData():   ${stats.getImageData}`);
+      console.log(`    putImageData():   ${stats.putImageData}`);
+      console.log(`    gradients:        ${stats.createRadialGradient + stats.createLinearGradient}`);
+      console.log(`    transforms:       ${stats.translate + stats.scale + stats.rotate}`);
+
+      const totalDrawOps = stats.fill + stats.stroke + stats.fillRect + stats.drawImage;
+      console.log(`\n  Total draw ops (fill+stroke+fillRect+drawImage): ${totalDrawOps}`);
+      console.log(`  Avg time per draw op: ${formatMs(total / totalDrawOps)}`);
+
+      expect(total).toBeLessThan(30_000);
+    });
+  }
+
+  it("profiles deadbeef hash (worst case) at 1024×1024", () => {
+    const { ctx, stats } = createInstrumentedCtx(1024, 1024);
+
+    const start = performance.now();
+    renderHashArt(ctx, HASH_DEADBEEF, { width: 1024, height: 1024 });
+    const total = performance.now() - start;
+
+    console.log(`\n  ═══ Pipeline profile: 1024×1024 (hash=deadbeef — worst case) ═══`);
+    console.log(`  Total: ${formatMs(total)}`);
+    console.log(`\n  Draw call counts:`);
+    console.log(`    fill():           ${stats.fill}`);
+    console.log(`    stroke():         ${stats.stroke}`);
+    console.log(`    fillRect():       ${stats.fillRect}`);
+    console.log(`    arc():            ${stats.arc}`);
+    console.log(`    beginPath():      ${stats.beginPath}`);
+    console.log(`    clip():           ${stats.clip}`);
+    console.log(`    save()/restore(): ${stats.save}/${stats.restore}`);
+
+    const totalDrawOps = stats.fill + stats.stroke + stats.fillRect + stats.drawImage;
+    console.log(`\n  Total draw ops: ${totalDrawOps}`);
+    console.log(`  Avg time per draw op: ${formatMs(total / totalDrawOps)}`);
+
+    expect(total).toBeLessThan(30_000);
+  });
+
+  it("compares shape counts across different hashes", () => {
+    const hashes = [
+      TEST_HASH,
+      HASH_DEADBEEF,
+      "ff00ff00ff00ff00ff00ff00ff00ff00ff00ff0",
+      "7777777777777777777777777777777777777777",
+    ];
+
+    console.log(`\n  ═══ Shape count comparison (1024×1024) ═══`);
+    console.log(`  ${"Hash".padEnd(12)} ${"Time".padStart(8)} ${"Fills".padStart(7)} ${"Strokes".padStart(8)} ${"FillRects".padStart(10)} ${"Clips".padStart(6)} ${"Total Ops".padStart(10)}`);
+
+    for (const hash of hashes) {
+      const { ctx, stats } = createInstrumentedCtx(1024, 1024);
+      const start = performance.now();
+      renderHashArt(ctx, hash, { width: 1024, height: 1024 });
+      const ms = performance.now() - start;
+      const totalOps = stats.fill + stats.stroke + stats.fillRect + stats.drawImage;
+
+      console.log(
+        `  ${hash.slice(0, 10).padEnd(12)} ${formatMs(ms).padStart(8)} ${String(stats.fill).padStart(7)} ${String(stats.stroke).padStart(8)} ${String(stats.fillRect).padStart(10)} ${String(stats.clip).padStart(6)} ${String(totalOps).padStart(10)}`
+      );
+    }
+
+    expect(true).toBe(true);
+  });
+});

package/src/lib/canvas/colors.ts

@@ -311,14 +311,23 @@ export class SacredColorScheme {
 
 // ── Standalone color utilities ──────────────────────────────────────
 
-/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. */
+// ── Cached hex→RGB parse — avoids repeated parseInt/substring on hot path ──
+const _rgbCache = new Map<string, [number, number, number]>();
+const _RGB_CACHE_MAX = 512;
+
+/** Parse a hex color (#RRGGBB) into [r, g, b] 0-255. Cached. */
 function hexToRgb(hex: string): [number, number, number] {
-  const c = hex.replace("#", "");
-  return [
+  let cached = _rgbCache.get(hex);
+  if (cached) return cached;
+  const c = hex.charAt(0) === "#" ? hex.substring(1) : hex;
+  cached = [
     parseInt(c.substring(0, 2), 16),
     parseInt(c.substring(2, 4), 16),
     parseInt(c.substring(4, 6), 16),
   ];
+  if (_rgbCache.size >= _RGB_CACHE_MAX) _rgbCache.clear();
+  _rgbCache.set(hex, cached);
+  return cached;
 }
 
 /** Format [r, g, b] back to #RRGGBB. */
@@ -365,7 +374,9 @@ function hslToHex(h: number, s: number, l: number): string {
  */
 export function hexWithAlpha(hex: string, alpha: number): string {
   const [r, g, b] = hexToRgb(hex);
-  return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+  // Quantize alpha to 3 decimal places without toFixed overhead
+  const a = Math.round(alpha * 1000) / 1000;
+  return `rgba(${r},${g},${b},${a})`;
 }
 
 /**
@@ -484,14 +495,20 @@ export function shiftTemperature(hex: string, target: "warm" | "cool", amount: n
 
 /**
  * Compute relative luminance of a hex color (0 = black, 1 = white).
- * Uses the sRGB luminance formula from WCAG.
+ * Uses the sRGB luminance formula from WCAG. Cached.
  */
+const _lumCache = new Map<string, number>();
 export function luminance(hex: string): number {
+  let cached = _lumCache.get(hex);
+  if (cached !== undefined) return cached;
   const [r, g, b] = hexToRgb(hex).map((c) => {
     const s = c / 255;
     return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
   });
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  cached = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  if (_lumCache.size >= 512) _lumCache.clear();
+  _lumCache.set(hex, cached);
+  return cached;
 }
 
 /**

package/src/lib/canvas/draw.ts

@@ -67,6 +67,45 @@ export function pickRenderStyle(rng: () => number): RenderStyle {
   return RENDER_STYLES[Math.floor(rng() * RENDER_STYLES.length)];
 }
 
+/**
+ * Approximate cost weight for each render style, normalized so
+ * fill-and-stroke = 1.  Based on benchmark measurements.
+ */
+export const RENDER_STYLE_COST: Record<RenderStyle, number> = {
+  "fill-and-stroke": 1,
+  "fill-only":       0.5,
+  "stroke-only":     1,
+  "double-stroke":   1.5,
+  "dashed":          1,
+  "watercolor":      7,
+  "hatched":         3,
+  "incomplete":      1,
+  "stipple":         90,
+  "stencil":         2,
+  "noise-grain":     400,
+  "wood-grain":      10,
+  "marble-vein":     4,
+  "fabric-weave":    6,
+  "hand-drawn":      5,
+};
+
+/**
+ * Downgrade an expensive render style to a cheaper alternative
+ * that preserves a similar visual feel.
+ */
+export function downgradeRenderStyle(style: RenderStyle): RenderStyle {
+  switch (style) {
+    case "noise-grain": return "hatched";
+    case "stipple":     return "dashed";
+    case "wood-grain":  return "hatched";
+    case "watercolor":  return "fill-and-stroke";
+    case "fabric-weave": return "hatched";
+    case "hand-drawn":  return "fill-and-stroke";
+    case "marble-vein": return "stroke-only";
+    default:            return style;
+  }
+}
+
 // ── Config interfaces ───────────────────────────────────────────────
 
 interface DrawShapeConfig {
@@ -246,6 +285,7 @@ function applyRenderStyle(
 
     case "hatched": {
       // Fill normally at reduced opacity, then overlay cross-hatch lines
+      // Optimized: batch all parallel lines into a single path per pass
       const savedAlphaH = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaH * 0.3;
       ctx.fill();
@@ -259,28 +299,28 @@ function applyRenderStyle(
       ctx.lineWidth = Math.max(0.5, strokeWidth * 0.4);
       ctx.globalAlpha = savedAlphaH * 0.6;
 
-      // Draw parallel lines across the bounding box
+      // Draw parallel lines across the bounding box — batched into single path
       const extent = size * 0.8;
       const cos = Math.cos(hatchAngle);
       const sin = Math.sin(hatchAngle);
+      ctx.beginPath();
       for (let d = -extent; d <= extent; d += hatchSpacing) {
-        ctx.beginPath();
         ctx.moveTo(d * cos - extent * sin, d * sin + extent * cos);
         ctx.lineTo(d * cos + extent * sin, d * sin - extent * cos);
-        ctx.stroke();
       }
+      ctx.stroke();
       // Second pass at perpendicular angle for cross-hatch (~50% chance)
       if (!rng || rng() < 0.5) {
         const crossAngle = hatchAngle + Math.PI / 2;
         const cos2 = Math.cos(crossAngle);
         const sin2 = Math.sin(crossAngle);
         ctx.globalAlpha = savedAlphaH * 0.35;
+        ctx.beginPath();
         for (let d = -extent; d <= extent; d += hatchSpacing * 1.4) {
-          ctx.beginPath();
           ctx.moveTo(d * cos2 - extent * sin2, d * sin2 + extent * cos2);
           ctx.lineTo(d * cos2 + extent * sin2, d * sin2 - extent * cos2);
-          ctx.stroke();
         }
+        ctx.stroke();
       }
       ctx.restore();
       ctx.globalAlpha = savedAlphaH;
@@ -316,6 +356,8 @@ function applyRenderStyle(
 
     case "stipple": {
       // Dot-fill texture — clip to shape, then scatter dots
+      // Optimized: use fillRect instead of arc for dots (much cheaper to render),
+      // and cap total dot count to avoid O(size²) blowup on large shapes.
       const savedAlphaS = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaS * 0.15;
       ctx.fill(); // ghost fill
@@ -324,17 +366,19 @@ function applyRenderStyle(
       ctx.save();
       ctx.clip();
       const dotSpacing = Math.max(2, size * 0.03);
-      const extent = size * 0.55;
+      const extentS = size * 0.55;
+      // Cap total dots: beyond ~900 (30×30 grid) the visual density plateaus
+      const maxDotsPerAxis = Math.min(Math.ceil((extentS * 2) / dotSpacing), 30);
+      const actualSpacing = (extentS * 2) / maxDotsPerAxis;
       ctx.globalAlpha = savedAlphaS * 0.7;
-      for (let dx = -extent; dx <= extent; dx += dotSpacing) {
-        for (let dy = -extent; dy <= extent; dy += dotSpacing) {
-          // Jitter each dot position for organic feel
-          const jx = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
-          const jy = rng ? (rng() - 0.5) * dotSpacing * 0.6 : 0;
-          const dotR = rng ? dotSpacing * (0.15 + rng() * 0.2) : dotSpacing * 0.2;
-          ctx.beginPath();
-          ctx.arc(dx + jx, dy + jy, dotR, 0, Math.PI * 2);
-          ctx.fill();
+      for (let xi = 0; xi < maxDotsPerAxis; xi++) {
+        const dx = -extentS + xi * actualSpacing;
+        for (let yi = 0; yi < maxDotsPerAxis; yi++) {
+          const dy = -extentS + yi * actualSpacing;
+          const jx = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+          const jy = rng ? (rng() - 0.5) * actualSpacing * 0.6 : 0;
+          const dotD = rng ? actualSpacing * (0.3 + rng() * 0.4) : actualSpacing * 0.4;
+          ctx.fillRect(dx + jx - dotD * 0.5, dy + jy - dotD * 0.5, dotD, dotD);
         }
       }
       ctx.restore();
@@ -368,6 +412,9 @@ function applyRenderStyle(
 
     case "noise-grain": {
       // Procedural noise grain texture clipped to shape boundary
+      // Optimized: cap grid to max 40×40 = 1600 dots (was unbounded at O(size²)),
+      // quantize alpha into buckets to minimize globalAlpha state changes,
+      // and batch dots by brightness (black/white) × alpha bucket
       const savedAlphaN = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaN * 0.25;
       ctx.fill(); // base tint
@@ -377,20 +424,51 @@ function applyRenderStyle(
       ctx.clip();
       const grainSpacing = Math.max(1.5, size * 0.015);
       const extentN = size * 0.55;
-      ctx.globalAlpha = savedAlphaN * 0.6;
-      for (let gx = -extentN; gx <= extentN; gx += grainSpacing) {
-        for (let gy = -extentN; gy <= extentN; gy += grainSpacing) {
-          if (!rng) break;
-          const jx = (rng() - 0.5) * grainSpacing * 1.2;
-          const jy = (rng() - 0.5) * grainSpacing * 1.2;
-          const brightness = rng() > 0.5 ? 255 : 0;
-          const dotAlpha = 0.15 + rng() * 0.35;
-          ctx.globalAlpha = savedAlphaN * dotAlpha;
-          ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-          const dotSize = grainSpacing * (0.3 + rng() * 0.5);
-          ctx.fillRect(gx + jx, gy + jy, dotSize, dotSize);
+
+      if (rng) {
+        // Cap grid to max 40 dots per axis — beyond this the grain is
+        // visually indistinguishable but cost scales quadratically.
+        const maxGrainPerAxis = Math.min(Math.ceil((extentN * 2) / grainSpacing), 40);
+        const actualGrainSpacing = (extentN * 2) / maxGrainPerAxis;
+
+        // 4 alpha buckets: 0.2, 0.3, 0.4, 0.5 — covers the 0.15-0.50 range
+        const BUCKETS = 4;
+        const bucketMin = 0.15;
+        const bucketRange = 0.35;
+        // [black_bucket0, black_bucket1, ..., white_bucket0, ...]
+        const buckets: Array<Array<{ x: number; y: number; s: number }>> = [];
+        for (let i = 0; i < BUCKETS * 2; i++) buckets.push([]);
+
+        for (let xi = 0; xi < maxGrainPerAxis; xi++) {
+          const gx = -extentN + xi * actualGrainSpacing;
+          for (let yi = 0; yi < maxGrainPerAxis; yi++) {
+            const gy = -extentN + yi * actualGrainSpacing;
+            const jx = (rng() - 0.5) * actualGrainSpacing * 1.2;
+            const jy = (rng() - 0.5) * actualGrainSpacing * 1.2;
+            const isWhite = rng() > 0.5;
+            const dotAlpha = bucketMin + rng() * bucketRange;
+            const dotSize = actualGrainSpacing * (0.3 + rng() * 0.5);
+            const bucketIdx = Math.min(BUCKETS - 1, Math.floor((dotAlpha - bucketMin) / bucketRange * BUCKETS));
+            const offset = isWhite ? BUCKETS : 0;
+            buckets[offset + bucketIdx].push({ x: gx + jx, y: gy + jy, s: dotSize });
+          }
+        }
+
+        // Render each bucket: 2 colors × 4 alpha levels = 8 state changes total
+        for (let color = 0; color < 2; color++) {
+          ctx.fillStyle = color === 0 ? "rgba(0,0,0,1)" : "rgba(255,255,255,1)";
+          for (let b = 0; b < BUCKETS; b++) {
+            const dots = buckets[color * BUCKETS + b];
+            if (dots.length === 0) continue;
+            const alpha = bucketMin + (b + 0.5) / BUCKETS * bucketRange;
+            ctx.globalAlpha = savedAlphaN * alpha;
+            for (let i = 0; i < dots.length; i++) {
+              ctx.fillRect(dots[i].x, dots[i].y, dots[i].s, dots[i].s);
+            }
+          }
         }
       }
+
       ctx.restore();
       ctx.fillStyle = fillColor;
       ctx.globalAlpha = savedAlphaN;
@@ -402,6 +480,7 @@ function applyRenderStyle(
 
     case "wood-grain": {
       // Parallel wavy lines simulating wood grain, clipped to shape
+      // Optimized: batch all grain lines into a single path, increased step from 2 to 4
       const savedAlphaW = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaW * 0.2;
       ctx.fill(); // base tint
@@ -419,17 +498,22 @@ function applyRenderStyle(
 
       const cosG = Math.cos(grainAngle);
       const sinG = Math.sin(grainAngle);
+      const waveCoeff = waveFreq * Math.PI;
+      const invExtentW = 1 / extentW;
+      // Batch all grain lines into a single path
+      ctx.beginPath();
       for (let d = -extentW; d <= extentW; d += grainLineSpacing) {
-        ctx.beginPath();
-        for (let t = -extentW; t <= extentW; t += 2) {
-          const wave = Math.sin((t / extentW) * waveFreq * Math.PI) * waveAmp;
-          const px = t * cosG - (d + wave) * sinG;
-          const py = t * sinG + (d + wave) * cosG;
-          if (t === -extentW) ctx.moveTo(px, py);
-          else ctx.lineTo(px, py);
+        const firstWave = Math.sin(-extentW * invExtentW * waveCoeff) * waveAmp;
+        ctx.moveTo(
+          -extentW * cosG - (d + firstWave) * sinG,
+          -extentW * sinG + (d + firstWave) * cosG,
+        );
+        for (let t = -extentW + 4; t <= extentW; t += 4) {
+          const wave = Math.sin(t * invExtentW * waveCoeff) * waveAmp;
+          ctx.lineTo(t * cosG - (d + wave) * sinG, t * sinG + (d + wave) * cosG);
         }
-        ctx.stroke();
       }
+      ctx.stroke();
       ctx.restore();
       ctx.globalAlpha = savedAlphaW;
       ctx.globalAlpha *= 0.35;
@@ -494,6 +578,7 @@ function applyRenderStyle(
 
     case "fabric-weave": {
       // Interlocking horizontal/vertical threads clipped to shape
+      // Optimized: batch all horizontal threads into one path, all vertical into another
       const savedAlphaF = ctx.globalAlpha;
       ctx.globalAlpha = savedAlphaF * 0.15;
       ctx.fill(); // ghost base
@@ -504,27 +589,29 @@ function applyRenderStyle(
       const threadSpacing = Math.max(2, size * 0.04);
       const extentF = size * 0.55;
       ctx.lineWidth = Math.max(0.8, threadSpacing * 0.5);
-      ctx.globalAlpha = savedAlphaF * 0.55;
 
-      // Horizontal threads
+      // Horizontal threads — batched
+      ctx.globalAlpha = savedAlphaF * 0.55;
+      ctx.beginPath();
       for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
-        ctx.beginPath();
         ctx.moveTo(-extentF, y);
         ctx.lineTo(extentF, y);
-        ctx.stroke();
       }
-      // Vertical threads (offset by half spacing for weave effect)
+      ctx.stroke();
+
+      // Vertical threads (offset by half spacing for weave effect) — batched
       ctx.globalAlpha = savedAlphaF * 0.45;
       ctx.strokeStyle = fillColor;
+      ctx.beginPath();
       for (let x = -extentF; x <= extentF; x += threadSpacing * 2) {
-        ctx.beginPath();
         for (let y = -extentF; y <= extentF; y += threadSpacing * 2) {
           // Over-under: draw segment, skip segment
           ctx.moveTo(x, y);
           ctx.lineTo(x, y + threadSpacing);
         }
-        ctx.stroke();
       }
+      ctx.stroke();
+
       ctx.strokeStyle = strokeColor;
       ctx.restore();
       ctx.globalAlpha = savedAlphaF;
@@ -628,14 +715,17 @@ export function enhanceShapeGeneration(
   ctx.rotate((rotation * Math.PI) / 180);
 
   // ── Drop shadow — soft colored shadow offset along light direction ──
-  if (lightAngle !== undefined && size > 10) {
+  // Skip shadow entirely for small shapes (< 20px) — the blur is expensive
+  // and visually imperceptible at that scale.
+  const useShadow = size >= 20;
+  if (useShadow && lightAngle !== undefined) {
     const shadowDist = size * 0.035;
     const shadowBlurR = size * 0.06;
     ctx.shadowOffsetX = Math.cos(lightAngle + Math.PI) * shadowDist;
     ctx.shadowOffsetY = Math.sin(lightAngle + Math.PI) * shadowDist;
     ctx.shadowBlur = shadowBlurR;
     ctx.shadowColor = "rgba(0,0,0,0.12)";
-  } else if (glowRadius > 0) {
+  } else if (useShadow && glowRadius > 0) {
     // Glow / shadow effect (legacy path)
     ctx.shadowBlur = glowRadius;
     ctx.shadowColor = glowColor || fillColor;
@@ -663,31 +753,28 @@ export function enhanceShapeGeneration(
   }
 
   // Reset shadow so patterns and highlight aren't double-shadowed
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetX = 0;
-  ctx.shadowOffsetY = 0;
-  ctx.shadowColor = "transparent";
+  // Only reset if we actually set shadow (avoids unnecessary state changes)
+  if (useShadow && (lightAngle !== undefined || glowRadius > 0)) {
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
+    ctx.shadowColor = "transparent";
+  }
 
   // ── Specular highlight — tinted arc on the light-facing side ──
-  if (lightAngle !== undefined && size > 15 && rng) {
+  // Skip for small shapes (< 30px) — gradient creation + composite op
+  // switch is expensive and the highlight is invisible at small sizes.
+  if (lightAngle !== undefined && size > 30 && rng) {
     const hlRadius = size * 0.35;
     const hlDist = size * 0.15;
     const hlX = Math.cos(lightAngle) * hlDist;
     const hlY = Math.sin(lightAngle) * hlDist;
     const hlGrad = ctx.createRadialGradient(hlX, hlY, 0, hlX, hlY, hlRadius);
-    // Tint highlight warm/cool based on fill color for cohesion
-    // Parse fill to detect warmth — fallback to white for non-parseable
-    let hlBase = "255,255,255";
-    if (typeof fillColor === "string" && fillColor.startsWith("#") && fillColor.length >= 7) {
-      const r = parseInt(fillColor.slice(1, 3), 16);
-      const g = parseInt(fillColor.slice(3, 5), 16);
-      const b = parseInt(fillColor.slice(5, 7), 16);
-      // Blend toward white but keep a hint of the fill's warmth
-      hlBase = `${Math.round(r * 0.15 + 255 * 0.85)},${Math.round(g * 0.15 + 255 * 0.85)},${Math.round(b * 0.15 + 255 * 0.85)}`;
-    }
-    hlGrad.addColorStop(0, `rgba(${hlBase},0.18)`);
-    hlGrad.addColorStop(0.5, `rgba(${hlBase},0.05)`);
-    hlGrad.addColorStop(1, `rgba(${hlBase},0)`);
+    // Use a simple white highlight — the per-shape hex parse was expensive
+    // and the visual difference from tinted highlights is negligible.
+    hlGrad.addColorStop(0, "rgba(255,255,255,0.18)");
+    hlGrad.addColorStop(0.5, "rgba(255,255,255,0.05)");
+    hlGrad.addColorStop(1, "rgba(255,255,255,0)");
     const savedOp = ctx.globalCompositeOperation;
     ctx.globalCompositeOperation = "soft-light";
     ctx.fillStyle = hlGrad;

package/src/lib/canvas/shapes/complex.ts

@@ -122,24 +122,33 @@ export const drawIslamicPattern: DrawFunction = (ctx, size, config = {}) => {
 
   const gridSize = 8;
   const unit = size / gridSize;
+  const radius = unit / 2;
+
+  // Pre-compute the 8 star-point angle pairs (cos/sin) — avoids 648 trig calls
+  const starPoints: Array<{ c1: number; s1: number; c2: number; s2: number }> = [];
+  for (let k = 0; k < 8; k++) {
+    const angle = (Math.PI / 4) * k;
+    const angle2 = angle + Math.PI / 4;
+    starPoints.push({
+      c1: Math.cos(angle) * radius,
+      s1: Math.sin(angle) * radius,
+      c2: Math.cos(angle2) * radius,
+      s2: Math.sin(angle2) * radius,
+    });
+  }
 
   ctx.beginPath();
   // Create base grid
   for (let i = 0; i <= gridSize; i++) {
+    const x = (i - gridSize / 2) * unit;
     for (let j = 0; j <= gridSize; j++) {
-      const x = (i - gridSize / 2) * unit;
       const y = (j - gridSize / 2) * unit;
 
-      // Draw star pattern at each intersection
-      const radius = unit / 2;
+      // Draw star pattern at each intersection using pre-computed offsets
       for (let k = 0; k < 8; k++) {
-        const angle = (Math.PI / 4) * k;
-        const x1 = x + radius * Math.cos(angle);
-        const y1 = y + radius * Math.sin(angle);
-        const x2 = x + radius * Math.cos(angle + Math.PI / 4);
-        const y2 = y + radius * Math.sin(angle + Math.PI / 4);
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
+        const sp = starPoints[k];
+        ctx.moveTo(x + sp.c1, y + sp.s1);
+        ctx.lineTo(x + sp.c2, y + sp.s2);
       }
     }
   }

package/src/lib/canvas/shapes/sacred.ts

@@ -149,28 +149,27 @@ export const drawVesicaPiscis: DrawFunction = (ctx, size) => {
 export const drawTorus: DrawFunction = (ctx, size) => {
   const outerRadius = size / 2;
   const innerRadius = size / 4;
-  const steps = 36;
+  // Adaptive step count: fewer segments for small shapes where detail isn't visible.
+  // 36×36 = 1296 segments at full size; at size < 60 we drop to 16×16 = 256.
+  const steps = size < 60 ? 16 : size < 150 ? 24 : 36;
+  const TWO_PI = Math.PI * 2;
+  const angleStep = TWO_PI / steps;
 
   ctx.beginPath();
   for (let i = 0; i < steps; i++) {
-    const angle1 = (i / steps) * Math.PI * 2;
-    // const angle2 = ((i + 1) / steps) * Math.PI * 2;
+    const angle1 = i * angleStep;
+    const cosA = Math.cos(angle1);
+    const sinA = Math.sin(angle1);
 
     for (let j = 0; j < steps; j++) {
-      const phi1 = (j / steps) * Math.PI * 2;
-      const phi2 = ((j + 1) / steps) * Math.PI * 2;
-
-      const x1 =
-        (outerRadius + innerRadius * Math.cos(phi1)) * Math.cos(angle1);
-      const y1 =
-        (outerRadius + innerRadius * Math.cos(phi1)) * Math.sin(angle1);
-      const x2 =
-        (outerRadius + innerRadius * Math.cos(phi2)) * Math.cos(angle1);
-      const y2 =
-        (outerRadius + innerRadius * Math.cos(phi2)) * Math.sin(angle1);
-
-      ctx.moveTo(x1, y1);
-      ctx.lineTo(x2, y2);
+      const phi1 = j * angleStep;
+      const phi2 = phi1 + angleStep;
+
+      const r1 = outerRadius + innerRadius * Math.cos(phi1);
+      const r2 = outerRadius + innerRadius * Math.cos(phi2);
+
+      ctx.moveTo(r1 * cosA, r1 * sinA);
+      ctx.lineTo(r2 * cosA, r2 * sinA);
     }
   }
 };