From efacef63b1f1a80c2a2061b47c8c939fd652a317 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 08:42:44 -0400
Subject: [PATCH 01/12] docs(SubmarineCablesGlobe): Improve perf by disabling
 hit canvas while spinning

---
 .../src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
index eac0b8e49..6d900cbb8 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
@@ -8,7 +8,6 @@
 
   import {
     Chart,
-    Circle,
     GeoPath,
     GeoPoint,
     GeoVisible,
@@ -80,7 +79,7 @@
       bind:context
     >
       {#snippet children({ context })}
-        <Layer type={shared.renderContext}>
+        <Layer type={shared.renderContext} disableHitCanvas={timer.running}>
           <GeoPath
             geojson={{ type: 'Sphere' }}
             class="fill-surface-200 stroke-surface-content/20"

From 6a3a4ac0176c79599c3fb331d0b78ea9ec5ca85b Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 08:46:27 -0400
Subject: [PATCH 02/12] fix(Canvas): Improve performance by skipping
 unnecessary work when hit canvas is unneeded

---
 .changeset/violet-gifts-fail.md               |  5 ++
 .../src/lib/components/layout/Canvas.svelte   | 72 ++++++++++---------
 2 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/violet-gifts-fail.md

diff --git a/.changeset/violet-gifts-fail.md b/.changeset/violet-gifts-fail.md
new file mode 100644
index 000000000..4482e0cb8
--- /dev/null
+++ b/.changeset/violet-gifts-fail.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Canvas): Improve performance by skipping unnecessary work when hit canvas is unneeded
diff --git a/packages/layerchart/src/lib/components/layout/Canvas.svelte b/packages/layerchart/src/lib/components/layout/Canvas.svelte
index a8e0b54a3..36852ea15 100644
--- a/packages/layerchart/src/lib/components/layout/Canvas.svelte
+++ b/packages/layerchart/src/lib/components/layout/Canvas.svelte
@@ -346,45 +346,53 @@
       context.restore();
     }
 
-    // sync hit canvas with main canvas
+    /*
+     * Sync hit canvas with main canvas
+     */
     if (hitCanvasContext) {
-      // scale hit canvas to match main canvas
-      scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
-      hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
-
-      // reset and sync transform to the state after retainState components
-      hitCanvasContext.resetTransform();
-      hitCanvasContext.setTransform(mainTransformAfterRetain);
-
-      // reset color generator
-      colorGenerator = rgbColorGenerator();
-
       const inactiveMoving = !activeCanvas && transformCtx.moving;
-
-      // render retainState components on hit canvas (e.g., Group)
-      for (const c of retainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
-
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging) {
-          // since the transform was already applied via setTransform, skip rendering
-          // the retainState component's transform again; proceed to its children
-          continue;
+      if (disableHitCanvas || transformCtx.dragging || inactiveMoving) {
+        // Skip rendering hit canvas
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+      } else {
+        // scale hit canvas to match main canvas
+        scaleCanvas(hitCanvasContext, ctx.containerWidth, ctx.containerHeight);
+        hitCanvasContext.clearRect(0, 0, ctx.containerWidth, ctx.containerHeight);
+
+        // reset and sync transform to the state after retainState components
+        hitCanvasContext.resetTransform();
+        hitCanvasContext.setTransform(mainTransformAfterRetain);
+
+        // reset color generator
+        colorGenerator = rgbColorGenerator();
+
+        // render retainState components on hit canvas (e.g., Group)
+        for (const c of retainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
+
+          if (componentHasEvents) {
+            // since the transform was already applied via setTransform, skip rendering
+            // the retainState component's transform again; proceed to its children
+            continue;
+          }
         }
-      }
 
-      // render non-retainState components on hit canvas
-      for (const c of nonRetainStateComponents) {
-        const componentHasEvents = c.events && Object.values(c.events).filter((d) => d).length > 0;
+        // render non-retainState components on hit canvas
+        for (const c of nonRetainStateComponents) {
+          const componentHasEvents =
+            c.events && Object.values(c.events).filter((d) => d).length > 0;
 
-        if (componentHasEvents && !inactiveMoving && !transformCtx.dragging && !disableHitCanvas) {
-          const color = getColorStr(colorGenerator.next().value);
-          const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
+          if (componentHasEvents) {
+            const color = getColorStr(colorGenerator.next().value);
+            const styleOverrides = { styles: { fill: color, stroke: color, _fillOpacity: 0.1 } };
 
-          hitCanvasContext.save();
-          c.render(hitCanvasContext, styleOverrides);
-          hitCanvasContext.restore();
+            hitCanvasContext.save();
+            c.render(hitCanvasContext, styleOverrides);
+            hitCanvasContext.restore();
 
-          componentByColor.set(color, c);
+            componentByColor.set(color, c);
+          }
         }
       }
     }

From 700f976f9c269af236372ee476d0f463d665dabe Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 09:41:13 -0400
Subject: [PATCH 03/12] Do not unnessarily call `getComputedStyles()` if
 component does not use classes

---
 packages/layerchart/src/lib/utils/canvas.ts | 57 ++++++++++++---------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 151372d1c..3c4bdacee 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -7,14 +7,16 @@ export const DEFAULT_FILL = 'rgb(0, 0, 0)';
 
 const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
 
+type StyleOptions = Partial<
+  Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
+    fillOpacity?: number | string;
+    strokeWidth?: number | string;
+    opacity?: number | string;
+  }
+>;
+
 export type ComputedStylesOptions = {
-  styles?: Partial<
-    Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
-      fillOpacity?: number | string;
-      strokeWidth?: number | string;
-      opacity?: number | string;
-    }
-  >;
+  styles?: StyleOptions;
   classes?: ClassValue | null;
 };
 
@@ -79,26 +81,33 @@ function render(
   // console.count('render');
 
   // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
-  const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
+  let resolvedStyles: StyleOptions;
+  if (styleOptions.classes == null) {
+    // Skip resolving styles if no classes are provided
+    resolvedStyles = styleOptions.styles ?? {};
+  } else {
+    const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
+    resolvedStyles = computedStyles;
+  }
 
   // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
   const paintOrder =
-    computedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
+    resolvedStyles?.paintOrder === 'stroke' ? ['stroke', 'fill'] : ['fill', 'stroke'];
 
-  if (computedStyles?.opacity) {
-    ctx.globalAlpha = Number(computedStyles?.opacity);
+  if (resolvedStyles?.opacity) {
+    ctx.globalAlpha = Number(resolvedStyles?.opacity);
   }
 
   // Text properties
-  ctx.font = `${computedStyles.fontWeight} ${computedStyles.fontSize} ${computedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+  ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
 
   // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
-  if (computedStyles.textAnchor === 'middle') {
+  if (resolvedStyles.textAnchor === 'middle') {
     ctx.textAlign = 'center';
-  } else if (computedStyles.textAnchor === 'end') {
+  } else if (resolvedStyles.textAnchor === 'end') {
     ctx.textAlign = 'right';
   } else {
-    ctx.textAlign = computedStyles.textAlign as CanvasTextAlign; // TODO: Handle/map `justify` and `match-parent`?
+    ctx.textAlign = resolvedStyles.textAlign as CanvasTextAlign; // TODO: Handle/map `justify` and `match-parent`?
   }
 
   // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
@@ -110,8 +119,8 @@ function render(
   // ctx.textBaseline = 'ideographic';
 
   // Dashed lines
-  if (computedStyles.strokeDasharray.includes(',')) {
-    const dashArray = computedStyles.strokeDasharray
+  if (resolvedStyles.strokeDasharray?.includes(',')) {
+    const dashArray = resolvedStyles.strokeDasharray
       .split(',')
       .map((s) => Number(s.replace('px', '')));
     ctx.setLineDash(dashArray);
@@ -125,13 +134,13 @@ function render(
           (styleOptions.styles?.fill as any) instanceof CanvasPattern ||
           !styleOptions.styles?.fill?.includes('var'))
           ? styleOptions.styles.fill
-          : computedStyles?.fill;
+          : resolvedStyles?.fill;
 
       if (fill && !['none', DEFAULT_FILL].includes(fill)) {
         const currentGlobalAlpha = ctx.globalAlpha;
 
-        const fillOpacity = Number(computedStyles?.fillOpacity);
-        const opacity = Number(computedStyles?.opacity);
+        const fillOpacity = Number(resolvedStyles?.fillOpacity);
+        const opacity = Number(resolvedStyles?.opacity);
         ctx.globalAlpha = fillOpacity * opacity;
 
         ctx.fillStyle = fill;
@@ -146,13 +155,13 @@ function render(
         ((styleOptions.styles?.stroke as any) instanceof CanvasGradient ||
           !styleOptions.styles?.stroke?.includes('var'))
           ? styleOptions.styles?.stroke
-          : computedStyles?.stroke;
+          : resolvedStyles?.stroke;
 
       if (stroke && !['none'].includes(stroke)) {
         ctx.lineWidth =
-          typeof computedStyles?.strokeWidth === 'string'
-            ? Number(computedStyles?.strokeWidth?.replace('px', ''))
-            : (computedStyles?.strokeWidth ?? 1);
+          typeof resolvedStyles?.strokeWidth === 'string'
+            ? Number(resolvedStyles?.strokeWidth?.replace('px', ''))
+            : (resolvedStyles?.strokeWidth ?? 1);
 
         ctx.strokeStyle = stroke;
         render.stroke(ctx);

From adc69ea34644df8a1d4c8eacb5faa905471e6f2e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 10:54:07 -0400
Subject: [PATCH 04/12] refactor: Use LayerStack endOfInterval() instead of
 internal

---
 .../layerchart/src/lib/components/MonthPath.svelte   |  4 ++--
 packages/layerchart/src/lib/utils/date.ts            | 12 ------------
 .../src/routes/docs/components/Calendar/+page.svelte |  6 +++---
 3 files changed, 5 insertions(+), 17 deletions(-)
 delete mode 100644 packages/layerchart/src/lib/utils/date.ts

diff --git a/packages/layerchart/src/lib/components/MonthPath.svelte b/packages/layerchart/src/lib/components/MonthPath.svelte
index 4dbc09a93..e0737a042 100644
--- a/packages/layerchart/src/lib/components/MonthPath.svelte
+++ b/packages/layerchart/src/lib/components/MonthPath.svelte
@@ -31,8 +31,8 @@
 
 <script lang="ts">
   import { timeWeek, timeMonth, timeYear } from 'd3-time';
-  import { endOfInterval } from '$lib/utils/date.js';
   import { cls } from '@layerstack/tailwind';
+  import { endOfInterval } from '@layerstack/utils';
   import { layerClass } from '$lib/utils/attributes.js';
   import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
@@ -58,7 +58,7 @@
   const startWeek = $derived(timeWeek.count(timeYear(date), date));
 
   // end of month
-  const monthEnd = $derived(endOfInterval(date, timeMonth));
+  const monthEnd = $derived(endOfInterval('month', date));
   const endDayOfWeek = $derived(monthEnd.getDay());
   const endWeek = $derived(timeWeek.count(timeYear(monthEnd), monthEnd));
 
diff --git a/packages/layerchart/src/lib/utils/date.ts b/packages/layerchart/src/lib/utils/date.ts
deleted file mode 100644
index de24148b3..000000000
--- a/packages/layerchart/src/lib/utils/date.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { type TimeInterval } from 'd3-time';
-
-/**
- * Get the date at the end of the interval
- * Similar to `interval.ceil(date)` except:
- *   - returns end of day instead of start of next day
- *   - properly handles start of day (i.e. not return same date)
- */
-export function endOfInterval(date: Date, interval: TimeInterval) {
-  // Can not use `new Date(+interval.ceil(date) - 1)`; as `.ceil()` will return same date when start of the day (matching `.floor()`)
-  return new Date(interval.offset(interval.floor(date), 1).getTime() - 1);
-}
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
index a3197af16..1a2d3b665 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
@@ -8,11 +8,11 @@
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
   import { shared } from '../../shared.svelte.js';
-  import { endOfInterval } from '$lib/utils/date.js';
+  import { endOfInterval } from '@layerstack/utils';
 
   const now = new Date();
   const firstDayOfYear = timeYear.floor(now);
-  const lastDayOfYear = endOfInterval(now, timeYear);
+  const lastDayOfYear = endOfInterval('year', now);
 
   const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
     (d) => {
@@ -147,7 +147,7 @@
         <Layer type={shared.renderContext}>
           {#each range(2019, 2024) as year, i}
             {@const start = new Date(year, 0, 1)}
-            {@const end = endOfInterval(start, timeYear)}
+            {@const end = endOfInterval('year', start)}
             <Group y={140 * i}>
               <Text
                 value={year}

From 298df0665010449805b11fe024e85819f305cf35 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 10:54:46 -0400
Subject: [PATCH 05/12] Remove unused `memoizeObject` util

---
 packages/layerchart/src/lib/utils/object.ts | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 packages/layerchart/src/lib/utils/object.ts

diff --git a/packages/layerchart/src/lib/utils/object.ts b/packages/layerchart/src/lib/utils/object.ts
deleted file mode 100644
index 5a595ed44..000000000
--- a/packages/layerchart/src/lib/utils/object.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { memoize } from 'lodash-es';
-
-export const memoizeObject = memoize(
-  (obj) => obj,
-  (obj) => JSON.stringify(obj)
-);

From f0bc1a11c527068876bccd63c19a2a4b94d05fcd Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 10:55:55 -0400
Subject: [PATCH 06/12] Replace lodash memoize with `memoize` package

---
 packages/layerchart/package.json            |  1 +
 packages/layerchart/src/lib/utils/canvas.ts | 37 +++++----------------
 packages/layerchart/src/lib/utils/string.ts |  9 +++--
 pnpm-lock.yaml                              | 17 ++++++++++
 4 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json
index b11e6a3c6..c217c31a9 100644
--- a/packages/layerchart/package.json
+++ b/packages/layerchart/package.json
@@ -110,6 +110,7 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "lodash-es": "^4.17.21",
+    "memoize": "^10.1.0",
     "runed": "^0.28.0"
   },
   "peerDependencies": {
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 3c4bdacee..c15159688 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -1,6 +1,6 @@
-import { cls } from '@layerstack/tailwind';
-import { memoize } from 'lodash-es';
 import type { ClassValue } from 'svelte/elements';
+import memoize from 'memoize';
+import { cls } from '@layerstack/tailwind';
 import type { PatternShape } from '$lib/components/Pattern.svelte';
 
 export const DEFAULT_FILL = 'rgb(0, 0, 0)';
@@ -332,20 +332,9 @@ export function _createLinearGradient(
 }
 
 /** Create linear gradient and memoize result to fix reactivity */
-export const createLinearGradient = memoize(
-  _createLinearGradient,
-  (
-    ctx: CanvasRenderingContext2D,
-    x0: number,
-    y0: number,
-    x1: number,
-    y1: number,
-    stops: { offset: number; color: string }[]
-  ) => {
-    const key = JSON.stringify({ x0, y0, x1, y1, stops });
-    return key;
-  }
-);
+export const createLinearGradient = memoize(_createLinearGradient, {
+  cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
+});
 
 export function _createPattern(
   ctx: CanvasRenderingContext2D,
@@ -395,16 +384,6 @@ export function _createPattern(
 }
 
 /** Create pattern and memoize result to fix reactivity */
-export const createPattern = memoize(
-  _createPattern,
-  (
-    ctx: CanvasRenderingContext2D,
-    width: number,
-    height: number,
-    shapes: PatternShape[],
-    background?: string
-  ) => {
-    const key = JSON.stringify({ width, height, shapes, background });
-    return key;
-  }
-);
+export const createPattern = memoize(_createPattern, {
+  cacheKey: (args) => JSON.stringify(args.slice(1)), // Ignore `ctx` argument
+});
diff --git a/packages/layerchart/src/lib/utils/string.ts b/packages/layerchart/src/lib/utils/string.ts
index 1b0306990..d93639ea2 100644
--- a/packages/layerchart/src/lib/utils/string.ts
+++ b/packages/layerchart/src/lib/utils/string.ts
@@ -1,4 +1,4 @@
-import { memoize } from 'lodash-es';
+import memoize from 'memoize';
 
 const MEASUREMENT_ELEMENT_ID = '__text_measurement_id';
 
@@ -29,10 +29,9 @@ function _getStringWidth(str: string, style?: CSSStyleDeclaration) {
   }
 }
 
-export const getStringWidth = memoize(
-  _getStringWidth,
-  (str, style) => `${str}_${JSON.stringify(style)}`
-);
+export const getStringWidth = memoize(_getStringWidth, {
+  cacheKey: ([str, style]) => `${str}_${JSON.stringify(style)}`,
+});
 
 export type RasterizeTextOptions = {
   fontSize?: string;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f89206f67..834466f25 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      memoize:
+        specifier: ^10.1.0
+        version: 10.1.0
       runed:
         specifier: ^0.28.0
         version: 0.28.0(svelte@5.32.1)
@@ -1960,6 +1963,10 @@ packages:
     peerDependencies:
       svelte: ^3.56.0 || ^4.0.0 || ^5.0.0-next.120
 
+  memoize@10.1.0:
+    resolution: {integrity: sha512-MMbFhJzh4Jlg/poq1si90XRlTZRDHVqdlz2mPyGJ6kqMpyHUyVpDd5gpFAvVehW64+RA1eKE9Yt8aSLY7w2Kgg==}
+    engines: {node: '>=18'}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1973,6 +1980,10 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   miniflare@4.20250508.3:
     resolution: {integrity: sha512-43oTmZ0CCmUcieetI5YDDyX0IiwhOcVIWzdBBCqWXK3F1XgQwg4d3fTqRyJnCmHIoaYx9CE1kTEKZC1UahPQhA==}
     engines: {node: '>=18.0.0'}
@@ -4423,6 +4434,10 @@ snapshots:
       svelte: 5.32.1
       vfile-message: 2.0.4
 
+  memoize@10.1.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -4432,6 +4447,8 @@ snapshots:
 
   mime@3.0.0: {}
 
+  mimic-function@5.0.1: {}
+
   miniflare@4.20250508.3:
     dependencies:
       '@cspotcode/source-map-support': 0.8.1

From 0b0a459afd4dd16ee2583255c1ebc664962fbb3e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 11:06:32 -0400
Subject: [PATCH 07/12] Restore using getComputedStyles() if style references
 CSS variable

---
 packages/layerchart/src/lib/utils/canvas.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index c15159688..095fddd0b 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -82,8 +82,14 @@ function render(
 
   // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
   let resolvedStyles: StyleOptions;
-  if (styleOptions.classes == null) {
-    // Skip resolving styles if no classes are provided
+  if (
+    styleOptions.classes == null &&
+    !Object.values(styleOptions.styles ?? {}).some(
+      (v) => typeof v === 'string' && v.includes('var(')
+    )
+  ) {
+    // Skip resolving styles if no classes are provided and no styles are using CSS variables
+    // TODO: Convert colors using `rgb(0 0 0 / 50%)` to `rgba(0, 0, 0, 0.5)`
     resolvedStyles = styleOptions.styles ?? {};
   } else {
     const computedStyles = getComputedStyles(ctx.canvas, styleOptions);

From 0b9b7c6dbb417c5a3b4f775e9212e438fb314255 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 12:07:12 -0400
Subject: [PATCH 08/12] fix(Canvas): Improve performace by reducing computed
 style lookups and memoizing responses

---
 .changeset/tricky-nights-mix.md             |  5 ++
 packages/layerchart/src/lib/utils/canvas.ts | 61 +++++++++++++++++++--
 2 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/tricky-nights-mix.md

diff --git a/.changeset/tricky-nights-mix.md b/.changeset/tricky-nights-mix.md
new file mode 100644
index 000000000..00c5468b1
--- /dev/null
+++ b/.changeset/tricky-nights-mix.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Canvas): Improve performace by reducing computed style lookups and memoizing responses
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 095fddd0b..89b0b8b0a 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -20,13 +20,28 @@ export type ComputedStylesOptions = {
   classes?: ClassValue | null;
 };
 
+const supportedStyles = [
+  'fill',
+  'stroke',
+  'opacity',
+  'fillOpacity',
+  'strokeWidth',
+  'fontWeight',
+  'fontSize',
+  'fontFamily',
+  'textAnchor',
+  'textAlign',
+  'paintOrder',
+] as const;
+
 /**
  * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: var(--color-primary)` => `stroke: rgb(...)` )
  */
-export function getComputedStyles(
+export function _getComputedStyles(
   canvas: HTMLCanvasElement,
   { styles, classes }: ComputedStylesOptions = {}
 ) {
+  // console.count(`getComputedStyles: ${getComputedStylesKey(canvas, { styles, classes })}`);
   try {
     // Get or create `<svg>` below `<canvas>`
     let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID) as SVGElement | null;
@@ -61,7 +76,12 @@ export function getComputedStyles(
       );
     }
 
-    const computedStyles = window.getComputedStyle(svg);
+    // Capture copy to enable memoization and avoid capturing all styles (which is very slow)
+    const computedStyles = supportedStyles.reduce((acc, style) => {
+      acc[style] = window.getComputedStyle(svg)[style];
+      return acc;
+    }, {} as CSSStyleDeclaration);
+
     return computedStyles;
   } catch (e) {
     console.error('Unable to get computed styles', e);
@@ -69,6 +89,19 @@ export function getComputedStyles(
   }
 }
 
+function getComputedStylesKey(
+  canvas: HTMLCanvasElement,
+  { styles, classes }: ComputedStylesOptions = {}
+) {
+  return JSON.stringify({ canvasId: canvas.id, styles, classes });
+}
+
+export const getComputedStyles = memoize(_getComputedStyles, {
+  cacheKey: ([canvas, styleOptions]) => {
+    return getComputedStylesKey(canvas, styleOptions);
+  },
+});
+
 /** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
 function render(
   ctx: CanvasRenderingContext2D,
@@ -89,11 +122,29 @@ function render(
     )
   ) {
     // Skip resolving styles if no classes are provided and no styles are using CSS variables
-    // TODO: Convert colors using `rgb(0 0 0 / 50%)` to `rgba(0, 0, 0, 0.5)`
     resolvedStyles = styleOptions.styles ?? {};
   } else {
-    const computedStyles = getComputedStyles(ctx.canvas, styleOptions);
-    resolvedStyles = computedStyles;
+    // Remove constant non-css variable properties (ex. `strokeWidth: 0.5`, `fill: #123456`) as not needed and improves memoization cache hit
+    const { constantStyles, variableStyles } = Object.entries(styleOptions.styles ?? {}).reduce<{
+      constantStyles: StyleOptions;
+      variableStyles: StyleOptions;
+    }>(
+      (acc, [key, value]) => {
+        if (typeof value === 'number' || (typeof value === 'string' && !value.includes('var('))) {
+          (acc.constantStyles as any)[key] = value;
+        } else if (typeof value === 'string' && value.includes('var(')) {
+          (acc.variableStyles as any)[key] = value;
+        }
+        return acc;
+      },
+      { constantStyles: {} as StyleOptions, variableStyles: {} as StyleOptions }
+    );
+
+    const computedStyles = getComputedStyles(ctx.canvas, {
+      styles: variableStyles,
+      classes: styleOptions.classes,
+    });
+    resolvedStyles = { ...computedStyles, ...constantStyles };
   }
 
   // Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

From b7af0b39474dca7c45463a94d79f62a71f4e681b Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 13:29:25 -0400
Subject: [PATCH 09/12] docs: Cleanup submarine cables examples

---
 .../examples/SubmarineCablesGlobe/+page.svelte   | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
index 6d900cbb8..b2ad55196 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
@@ -102,18 +102,6 @@
             />
           {/each}
 
-          <!-- Switch to Canvas for better performance -->
-          <!-- {#each data.landingPoints.features as feature}
-            {@const [long, lat] = feature.geometry.coordinates}
-            <GeoCircle
-              center={[long, lat]}
-              radius={0.5}
-              class="fill-surface-content stroke-surface-100 stroke"
-              onpointermove={(e) => tooltip?.show(e, feature.properties)}
-              onpointerleave={(e) => tooltip?.hide()}
-            />
-          {/each} -->
-
           {#each data.landingPoints.features as feature}
             {@const [long, lat] = feature.geometry.coordinates}
             <GeoVisible {lat} {long}>
@@ -132,10 +120,6 @@
         <Tooltip.Root>
           {#snippet children({ data })}
             {data.name}
-            <!-- <Tooltip.List>
-          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
-          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
-        </Tooltip.List> -->
           {/snippet}
         </Tooltip.Root>
       {/snippet}

From 87488ca524a02457fc986e3afb306cd91ee74fdb Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 16:04:06 -0400
Subject: [PATCH 10/12] fix(GeoPath): Improve performance by only using custom
 geoCurvePath when `curve` overridden

---
 .changeset/loud-paws-allow.md                         | 5 +++++
 packages/layerchart/src/lib/components/GeoPath.svelte | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/loud-paws-allow.md

diff --git a/.changeset/loud-paws-allow.md b/.changeset/loud-paws-allow.md
new file mode 100644
index 000000000..c0e401590
--- /dev/null
+++ b/.changeset/loud-paws-allow.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(GeoPath): Improve performance by only using custom geoCurvePath when `curve` overridden
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index 457840a66..39d54c823 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -5,6 +5,7 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import {
+    geoPath as d3GeoPath,
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
     type GeoPermissibleObjects,
@@ -105,6 +106,10 @@
   const geoPath = $derived.by(() => {
     geojson;
     if (!projection) return;
+    // Only use geoCurvePath for custom curves (performance impact)
+    if (curve === curveLinearClosed) {
+      return d3GeoPath(projection);
+    }
     return geoCurvePath(projection, curve);
   });
 

From 1ef1c08ef2f1e8e5e8a011b1640cc658f05a1502 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 16:04:48 -0400
Subject: [PATCH 11/12] fix(GeoPath): Fix reactivity with `curve` when using
 Canvas context

---
 .changeset/brave-spies-give.md                        | 5 +++++
 packages/layerchart/src/lib/components/GeoPath.svelte | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brave-spies-give.md

diff --git a/.changeset/brave-spies-give.md b/.changeset/brave-spies-give.md
new file mode 100644
index 000000000..c75aa5d15
--- /dev/null
+++ b/.changeset/brave-spies-give.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(GeoPath): Fix reactivity with `curve` when using Canvas context
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index 39d54c823..11003b66f 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -171,8 +171,9 @@
         touchmove: restProps.ontouchmove,
       },
       deps: () => [
-        geojson,
         projection,
+        geojson,
+        curve,
         fillKey.current,
         strokeKey.current,
         strokeWidth,

From 178418889cfe860a6bfd151d995b40af47a22a76 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Thu, 12 Jun 2025 16:38:37 -0400
Subject: [PATCH 12/12] fix(Canvas): Only apply text/font properties to canvas
 to improve performance

---
 .changeset/curly-lies-write.md              |  5 ++
 packages/layerchart/src/lib/utils/canvas.ts | 51 ++++++++++++---------
 2 files changed, 35 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/curly-lies-write.md

diff --git a/.changeset/curly-lies-write.md b/.changeset/curly-lies-write.md
new file mode 100644
index 000000000..4c9009fbe
--- /dev/null
+++ b/.changeset/curly-lies-write.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Canvas): Only apply text/font properties to canvas to improve performance
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
index 89b0b8b0a..f164c357a 100644
--- a/packages/layerchart/src/lib/utils/canvas.ts
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -22,10 +22,10 @@ export type ComputedStylesOptions = {
 
 const supportedStyles = [
   'fill',
-  'stroke',
-  'opacity',
   'fillOpacity',
+  'stroke',
   'strokeWidth',
+  'opacity',
   'fontWeight',
   'fontSize',
   'fontFamily',
@@ -109,7 +109,12 @@ function render(
     stroke: (ctx: CanvasRenderingContext2D) => void;
     fill: (ctx: CanvasRenderingContext2D) => void;
   },
-  styleOptions: ComputedStylesOptions = {}
+  styleOptions: ComputedStylesOptions = {},
+  {
+    applyText,
+  }: {
+    applyText?: boolean;
+  } = {}
 ) {
   // console.count('render');
 
@@ -155,26 +160,29 @@ function render(
     ctx.globalAlpha = Number(resolvedStyles?.opacity);
   }
 
-  // Text properties
-  ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+  // font/text properties can be expensive to set (not sure why), so only apply if needed (renderText())
+  if (applyText) {
+    // Text properties
+    ctx.font = `${resolvedStyles.fontWeight} ${resolvedStyles.fontSize} ${resolvedStyles.fontFamily}`; // build string instead of using `computedStyles.font` to fix/workaround `tabular-nums` returning `null`
+
+    // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
+    if (resolvedStyles.textAnchor === 'middle') {
+      ctx.textAlign = 'center';
+    } else if (resolvedStyles.textAnchor === 'end') {
+      ctx.textAlign = 'right';
+    } else {
+      ctx.textAlign = resolvedStyles.textAlign as CanvasTextAlign; // TODO: Handle/map `justify` and `match-parent`?
+    }
 
-  // TODO: Hack to handle `textAnchor` with canvas.  Try to find a better approach
-  if (resolvedStyles.textAnchor === 'middle') {
-    ctx.textAlign = 'center';
-  } else if (resolvedStyles.textAnchor === 'end') {
-    ctx.textAlign = 'right';
-  } else {
-    ctx.textAlign = resolvedStyles.textAlign as CanvasTextAlign; // TODO: Handle/map `justify` and `match-parent`?
+    // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+    // ctx.textBaseline = 'top';
+    // ctx.textBaseline = 'middle';
+    // ctx.textBaseline = 'bottom';
+    // ctx.textBaseline = 'alphabetic';
+    // ctx.textBaseline = 'hanging';
+    // ctx.textBaseline = 'ideographic';
   }
 
-  // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
-  // ctx.textBaseline = 'top';
-  // ctx.textBaseline = 'middle';
-  // ctx.textBaseline = 'bottom';
-  // ctx.textBaseline = 'alphabetic';
-  // ctx.textBaseline = 'hanging';
-  // ctx.textBaseline = 'ideographic';
-
   // Dashed lines
   if (resolvedStyles.strokeDasharray?.includes(',')) {
     const dashArray = resolvedStyles.strokeDasharray
@@ -258,7 +266,8 @@ export function renderText(
         fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
         stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
       },
-      styleOptions
+      styleOptions,
+      { applyText: true }
     );
   }
 }