diff --git a/.changeset/bright-buses-buy.md b/.changeset/bright-buses-buy.md
new file mode 100644
index 000000000..650013953
--- /dev/null
+++ b/.changeset/bright-buses-buy.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Support Canvas context for most primatives (Arc, Area, Circle, Group, Line, LinearGradient, Rect, Spline, and Text). Also updates components using primatives (Axis, Bar, Grid, Rule, and more)
diff --git a/.changeset/chilly-jeans-film.md b/.changeset/chilly-jeans-film.md
new file mode 100644
index 000000000..e23109128
--- /dev/null
+++ b/.changeset/chilly-jeans-film.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+Add `spikePath()` util
diff --git a/.changeset/chilly-moles-wave.md b/.changeset/chilly-moles-wave.md
new file mode 100644
index 000000000..284fdec8d
--- /dev/null
+++ b/.changeset/chilly-moles-wave.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(circlePath): Correctly handle sweep argument
diff --git a/.changeset/cold-penguins-jump.md b/.changeset/cold-penguins-jump.md
new file mode 100644
index 000000000..cd60cd2e2
--- /dev/null
+++ b/.changeset/cold-penguins-jump.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Update all simplified charts to support `renderContext` prop to switch between Svg (default) and Canvas (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
diff --git a/.changeset/dry-dodos-build.md b/.changeset/dry-dodos-build.md
new file mode 100644
index 000000000..31e5d8f75
--- /dev/null
+++ b/.changeset/dry-dodos-build.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Canvas): Support `center` prop (similar to `Svg`) to translate children to center (useful for radial layouts)
diff --git a/.changeset/dry-masks-suffer.md b/.changeset/dry-masks-suffer.md
new file mode 100644
index 000000000..9cca5abd3
--- /dev/null
+++ b/.changeset/dry-masks-suffer.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add new `renderPathData()` canvas util to simplify rendering SVG path data onto canvas context with CSS variable and class support
diff --git a/.changeset/dry-singers-travel.md b/.changeset/dry-singers-travel.md
new file mode 100644
index 000000000..7ac5505b7
--- /dev/null
+++ b/.changeset/dry-singers-travel.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add new `renderRect()` canvas util to simplify rendering rectangles onto canvas context with CSS variable and class support
diff --git a/.changeset/early-keys-think.md b/.changeset/early-keys-think.md
new file mode 100644
index 000000000..6e0d66ffb
--- /dev/null
+++ b/.changeset/early-keys-think.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(LinearGradient|RadialGradient): Rename `url` slot prop to `gradient`. Improves name, especially within canvas context
diff --git a/.changeset/gentle-months-rest.md b/.changeset/gentle-months-rest.md
new file mode 100644
index 000000000..fa9e68f91
--- /dev/null
+++ b/.changeset/gentle-months-rest.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix: Reduce likihood of clipping for Canvas-rendered simplified charts by increasing default padding (and add top))
diff --git a/.changeset/ninety-numbers-fail.md b/.changeset/ninety-numbers-fail.md
new file mode 100644
index 000000000..e511fb1ee
--- /dev/null
+++ b/.changeset/ninety-numbers-fail.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Canvas): Support multiple children (fix infinite loops, coordinating redraws, etc). Resolves issue #158
diff --git a/.changeset/orange-parrots-arrive.md b/.changeset/orange-parrots-arrive.md
new file mode 100644
index 000000000..085733e0c
--- /dev/null
+++ b/.changeset/orange-parrots-arrive.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add new `renderText()` canvas util to simplify rendering text onto canvas context with CSS variable and class support
diff --git a/.changeset/popular-stingrays-change.md b/.changeset/popular-stingrays-change.md
new file mode 100644
index 000000000..3528218b5
--- /dev/null
+++ b/.changeset/popular-stingrays-change.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Improve Canvas implementation with registering render functions and common invalidation to synchronize redrawing
diff --git a/.changeset/pretty-bears-report.md b/.changeset/pretty-bears-report.md
new file mode 100644
index 000000000..b30cca348
--- /dev/null
+++ b/.changeset/pretty-bears-report.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add `scaleCanvas` util
diff --git a/.changeset/shaggy-rocks-tan.md b/.changeset/shaggy-rocks-tan.md
new file mode 100644
index 000000000..891b504d9
--- /dev/null
+++ b/.changeset/shaggy-rocks-tan.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+Add `clearCanvasContext()` util
diff --git a/.changeset/warm-cars-attack.md b/.changeset/warm-cars-attack.md
new file mode 100644
index 000000000..0d16563c4
--- /dev/null
+++ b/.changeset/warm-cars-attack.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Add `ComputedStyles` component to easily resolve classes / CSS variable values (useful when working with <canvas>)
diff --git a/.changeset/wicked-mirrors-sleep.md b/.changeset/wicked-mirrors-sleep.md
new file mode 100644
index 000000000..7c0f699a3
--- /dev/null
+++ b/.changeset/wicked-mirrors-sleep.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(GeoPath): Simplify render prop use case by leveraging renderPathData() (ex. HitCanvas)
diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json
index 1ba97473c..7d0e8dda5 100644
--- a/packages/layerchart/package.json
+++ b/packages/layerchart/package.json
@@ -81,7 +81,7 @@
   "type": "module",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@layerstack/svelte-actions": "^0.0.9",
+    "@layerstack/svelte-actions": "^0.0.11",
     "@layerstack/svelte-stores": "^0.0.9",
     "@layerstack/tailwind": "^0.0.11",
     "@layerstack/utils": "^0.0.7",
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index f23ddd44f..5565ec2a1 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -17,7 +17,7 @@
   // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
   // https://codepen.io/simeydotme/pen/rrOEmO/
 
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { arc as d3arc } from 'd3-shape';
@@ -28,6 +28,8 @@
   import { motionStore } from '$lib/stores/motionStore.js';
   import { degreesToRadians } from '$lib/utils/math.js';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderPathData } from '../utils/canvas.js';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -80,6 +82,11 @@
   export let padAngle = 0;
   // export let padRadius = 0;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   export let track: boolean | SVGAttributes<SVGPathElement> = false;
 
   const { yRange } = chartContext();
@@ -183,36 +190,85 @@
    * Data to set when showing tooltip
    */
   export let data: any = undefined;
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    ctx.translate(xOffset, yOffset);
+
+    // Track
+    const trackProps = { ...(typeof track === 'object' ? track : null) };
+    renderPathData(ctx, trackArc(), {
+      styles: {
+        fill: trackProps['fill'] ?? undefined,
+        fillOpacity: trackProps['fill-opacity'] ?? undefined,
+        stroke: trackProps['stroke'] ?? undefined,
+        strokeWidth: trackProps['stroke-width'] ?? undefined,
+        opacity: trackProps['opacity'] ?? undefined,
+      },
+      classes: trackProps.class ?? undefined,
+    });
+
+    // Arc
+    renderPathData(ctx, arc(), {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Arc', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    arc && trackArc;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-{#if track}
+{#if renderContext === 'svg'}
+  {#if track}
+    <path
+      d={trackArc()}
+      class="track"
+      bind:this={trackArcEl}
+      {...typeof track === 'object' ? track : null}
+    />
+  {/if}
+
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <path
-    d={trackArc()}
-    class="track"
-    bind:this={trackArcEl}
-    {...typeof track === 'object' ? track : null}
+    d={arc()}
+    transform="translate({xOffset}, {yOffset})"
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    on:pointerenter={(e) => tooltip?.show(e, data)}
+    on:pointermove={(e) => tooltip?.show(e, data)}
+    on:pointerleave={(e) => tooltip?.hide()}
+    on:touchmove={(e) => {
+      if (tooltip) {
+        // Prevent touch to not interfer with pointer when using tooltip
+        e.preventDefault();
+      }
+    }}
+    on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<path
-  d={arc()}
-  transform="translate({xOffset}, {yOffset})"
-  {...$$restProps}
-  on:pointerenter={(e) => tooltip?.show(e, data)}
-  on:pointermove={(e) => tooltip?.show(e, data)}
-  on:pointerleave={(e) => tooltip?.hide()}
-  on:touchmove={(e) => {
-    if (tooltip) {
-      // Prevent touch to not interfer with pointer when using tooltip
-      e.preventDefault();
-    }
-  }}
-  on:click
-  on:pointerenter
-  on:pointermove
-  on:pointerleave
-  on:touchmove
-/>
-
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />
diff --git a/packages/layerchart/src/lib/components/Area.svelte b/packages/layerchart/src/lib/components/Area.svelte
index 5758f2816..c01390ac3 100644
--- a/packages/layerchart/src/lib/components/Area.svelte
+++ b/packages/layerchart/src/lib/components/Area.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
+  import { onDestroy, type ComponentProps } from 'svelte';
   import type { tweened as tweenedStore } from 'svelte/motion';
   import { type Area, area as d3Area, areaRadial } from 'd3-shape';
   import type { CurveFactory } from 'd3-shape';
@@ -14,6 +14,8 @@
   import Spline from './Spline.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const {
     data: contextData,
@@ -23,8 +25,8 @@
     y,
     yDomain,
     yRange,
-    config,
     radial,
+    config,
   } = chartContext();
 
   /** Override data instead of using context */
@@ -52,6 +54,11 @@
   /** Enable showing line */
   export let line: boolean | Partial<ComponentProps<Spline>> = false;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   const xAccessor = x ? accessor(x) : $contextX;
   const y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
   const y1Accessor = y1 ? accessor(y1) : $y;
@@ -125,8 +132,34 @@
     const d = pathData ?? path(data ?? $contextData);
     tweened_d.set(d ?? '');
   }
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderPathData(ctx, $tweened_d, {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Area', render });
+
+    tweened_d.subscribe(() => {
+      canvasContext.invalidate();
+    });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
+<!-- TODO: Find way to not clear <Canvas> when rendering Spline (remove Area rendering).  Idea: https://github.com/techniq/layerchart/issues/158#issuecomment-2543416108 -->
 {#if line}
   <Spline
     {data}
@@ -139,13 +172,19 @@
   />
 {/if}
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<path
-  d={$tweened_d}
-  clip-path={clipPath}
-  {...$$restProps}
-  class={cls('path-area', $$props.class)}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <path
+    d={$tweened_d}
+    clip-path={clipPath}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    class={cls('path-area', $$props.class)}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+{/if}
diff --git a/packages/layerchart/src/lib/components/Bar.svelte b/packages/layerchart/src/lib/components/Bar.svelte
index 5fb11cf49..d6fa6bed1 100644
--- a/packages/layerchart/src/lib/components/Bar.svelte
+++ b/packages/layerchart/src/lib/components/Bar.svelte
@@ -9,6 +9,7 @@
   import { isScaleBand } from '../utils/scales.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { greatestAbs } from '@layerstack/utils';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const { x: xContext, y: yContext, xScale } = chartContext();
 
@@ -106,9 +107,12 @@
       z`
     .split('\n')
     .join('');
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 </script>
 
-{#if _rounded === 'all' || radius === 0}
+{#if (_rounded === 'all' || radius === 0) && renderContext === 'svg'}
   <Rect
     {fill}
     {spring}
diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
index 03f21befc..a6aca5424 100644
--- a/packages/layerchart/src/lib/components/Circle.svelte
+++ b/packages/layerchart/src/lib/components/Circle.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '$lib/stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { circlePath } from '../utils/path.js';
+  import { renderPathData } from '../utils/canvas.js';
 
   export let cx: number = 0;
   export let initialCx = cx;
@@ -17,6 +20,11 @@
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   let tweened_cx = motionStore(initialCx, { spring, tweened });
   let tweened_cy = motionStore(initialCy, { spring, tweened });
   let tweened_r = motionStore(initialR, { spring, tweened });
@@ -26,16 +34,50 @@
     tweened_cy.set(cy);
     tweened_r.set(r);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    const pathData = circlePath({ cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r });
+    renderPathData(ctx, pathData, {
+      styles: { fill, fillOpacity, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Circle', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_cx && $tweened_cy && $tweened_r;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<circle
-  cx={$tweened_cx}
-  cy={$tweened_cy}
-  r={$tweened_r}
-  class={cls($$props.fill == null && 'fill-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <circle
+    cx={$tweened_cx}
+    cy={$tweened_cy}
+    r={$tweened_r}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    class={cls($$props.fill == null && 'fill-surface-content')}
+    {...$$restProps}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+{/if}
diff --git a/packages/layerchart/src/lib/components/ComputedStyles.svelte b/packages/layerchart/src/lib/components/ComputedStyles.svelte
new file mode 100644
index 000000000..2c8fb4324
--- /dev/null
+++ b/packages/layerchart/src/lib/components/ComputedStyles.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { computedStyles } from '@layerstack/svelte-actions';
+  import { cls } from '@layerstack/tailwind';
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
+  let styles: CSSStyleDeclaration;
+</script>
+
+<div
+  class={cls('ComputedStyles hidden', className)}
+  use:computedStyles={(_styles) => (styles = _styles)}
+></div>
+
+<slot {styles} />
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index 487d3f246..34091e478 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import {
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
@@ -10,11 +9,12 @@
   } from 'd3-geo';
   import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
   import { geoContext } from './GeoContext.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import { geoCurvePath } from '$lib/utils/geo.js';
+  import { renderPathData } from '$lib/utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let geojson: GeoPermissibleObjects | null | undefined = undefined;
 
@@ -22,13 +22,13 @@
   export let render:
     | ((
         ctx: CanvasRenderingContext2D,
-        options: { geoPath: ReturnType<typeof geoCurvePath> }
+        options: { newGeoPath: () => ReturnType<typeof geoCurvePath> }
       ) => any)
     | undefined = undefined;
 
   export let fill: string | undefined = undefined;
   export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
 
   /**
    * Tooltip context to setup mouse events to show tooltip for related data
@@ -53,8 +53,6 @@
     click: { geoPath: ReturnType<typeof geoCurvePath>; event: MouseEvent };
   }>();
 
-  const { containerWidth, containerHeight, padding } = chartContext();
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   /**
@@ -68,51 +66,45 @@
   $: _projection = geoTransform ? d3geoTransform(geoTransform($geo)) : $geo;
 
   $: geoPath = geoCurvePath(_projection, curve);
+  $: {
+    // Recreate `geoPath()` if `geojson` data changes (fixes ghosting issue when rendering to canvas)
+    geojson;
+    geoPath = geoCurvePath(_projection, curve);
+  }
 
-  const DEFAULT_FILL = 'rgb(0, 0, 0)';
-
-  $: renderContext = canvas ? 'canvas' : 'svg';
-
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx) {
-    let computedStyles: Partial<CSSStyleDeclaration> = {};
-
-    // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if (className) {
-      $ctx.canvas.classList.add(...className.split(' '));
-      computedStyles = window.getComputedStyle($ctx.canvas);
-    }
-
-    // console.count('render');
-
-    // Clear with negative offset due to Canvas `context.translate(...)`
-    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
+  function _render(ctx: CanvasRenderingContext2D) {
     if (render) {
-      geoPath = geoCurvePath(_projection, curve, $ctx);
-      render($ctx, { geoPath });
+      render(ctx, { newGeoPath: () => geoCurvePath(_projection, curve) });
     } else {
-      $ctx.beginPath();
-      // Set the context here since setting it in `$: geoPath` is a circular reference
-      geoPath = geoCurvePath(_projection, curve, $ctx);
       if (geojson) {
-        geoPath(geojson);
+        const pathData = geoPath(geojson);
+        renderPathData(ctx, pathData, {
+          styles: { fill, stroke, strokeWidth },
+          classes: className,
+        });
       }
-
-      $ctx.fillStyle =
-        fill ??
-        (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-        'transparent';
-      $ctx.fill();
-
-      $ctx.lineWidth = Number(strokeWidth ?? 0);
-      $ctx.strokeStyle =
-        (stroke ?? computedStyles.stroke === 'none')
-          ? 'transparent'
-          : (computedStyles.stroke ?? '');
-      $ctx.stroke();
     }
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoPath', render: _render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when geojson, projection, or class change
+    geojson && _projection && className && fill && stroke && strokeWidth;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/layerchart/src/lib/components/GeoPoint.svelte b/packages/layerchart/src/lib/components/GeoPoint.svelte
index ed44c1190..c752a1542 100644
--- a/packages/layerchart/src/lib/components/GeoPoint.svelte
+++ b/packages/layerchart/src/lib/components/GeoPoint.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy } from 'svelte';
 
   import { geoContext } from './GeoContext.svelte';
   import Circle from './Circle.svelte';
   import Group from './Group.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   /** Latitude */
   export let lat: number;
@@ -17,24 +17,27 @@
     coords: { x: number; y: number }
   ) => any = () => {};
 
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   $: [x, y] = $geo([long, lat]) ?? [0, 0];
 
-  $: renderContext = canvas ? 'canvas' : 'svg';
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx) {
-    // $ctx.clearRect(0, 0, $width, $height);
-
-    // Transfer classes defined on <GeoPoint> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if ($$props.class) {
-      $ctx.canvas.classList.add(...$$props.class.split(' '));
-    }
+  function _render(ctx: CanvasRenderingContext2D) {
+    render(ctx, { x, y });
+  }
 
-    render($ctx, { x, y });
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoPoint', render: _render });
   }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 {#if renderContext === 'svg'}
@@ -46,3 +49,14 @@
     <Circle cx={x} cy={y} {...$$restProps} />
   {/if}
 {/if}
+
+{#if renderContext === 'canvas'}
+  {#if $$slots.default}
+    <!-- TODO: Handle Canvas translation.  Conslidate with svg use case above (if `render` is not defined) -->
+    <!-- <Group {x} {y} {...$$restProps}> -->
+    <slot />
+    <!-- </Group> -->
+  {:else}
+    <Circle cx={x} cy={y} {...$$restProps} />
+  {/if}
+{/if}
diff --git a/packages/layerchart/src/lib/components/GeoTile.svelte b/packages/layerchart/src/lib/components/GeoTile.svelte
index 5657557a9..b5ef6aeea 100644
--- a/packages/layerchart/src/lib/components/GeoTile.svelte
+++ b/packages/layerchart/src/lib/components/GeoTile.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { getContext } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy } from 'svelte';
   // @ts-expect-error
   import { tile as d3Tile } from 'd3-tile';
 
@@ -8,6 +7,7 @@
   import { geoContext } from './GeoContext.svelte';
   import Group from './Group.svelte';
   import TileImage from './TileImage.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let url: (x: number, y: number, z: number) => string;
   export let zoomDelta = 0;
@@ -16,7 +16,6 @@
   export let debug = false;
 
   const { containerWidth, containerHeight, padding } = chartContext();
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
   const geo = geoContext();
 
   $: center = $geo([0, 0]) ?? [0, 0];
@@ -34,18 +33,34 @@
     scale,
   } = tiles);
 
-  $: renderContext = canvas ? 'canvas' : 'svg';
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx && url) {
+  function render(ctx: CanvasRenderingContext2D) {
     tiles.forEach(([x, y, z]: number[]) => {
       const image = new Image();
       image.onload = () => {
-        $ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
+        ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
       };
       image.src = url(x, y, z);
     });
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'GeoTile', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    tile;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 {#if renderContext === 'svg' && url}
diff --git a/packages/layerchart/src/lib/components/Group.svelte b/packages/layerchart/src/lib/components/Group.svelte
index c23b19339..6cf3ca221 100644
--- a/packages/layerchart/src/lib/components/Group.svelte
+++ b/packages/layerchart/src/lib/components/Group.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '$lib/stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const { width, height } = chartContext();
 
@@ -44,23 +45,50 @@
   $: if (center || x != null || y != null) {
     transform = `translate(${$tweened_x ?? 0}, ${$tweened_y ?? 0})`;
   }
-</script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<g
-  {transform}
-  {...$$restProps}
-  on:click
-  on:pointerdown
-  on:pointerenter
-  on:pointermove
-  on:pointerleave
-  on:touchmove={(e) => {
-    if (preventTouchMove) {
-      // Prevent touch to not interfer with pointer
-      e.preventDefault();
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Group', render, retainState: true });
+  }
+
+  $: if (renderContext === 'canvas') {
+    $tweened_x && $tweened_y;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
     }
-  }}
->
+  });
+</script>
+
+{#if renderContext === 'canvas'}
   <slot />
-</g>
+{:else if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <g
+    {transform}
+    {...$$restProps}
+    on:click
+    on:pointerdown
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove={(e) => {
+      if (preventTouchMove) {
+        // Prevent touch to not interfer with pointer
+        e.preventDefault();
+      }
+    }}
+  >
+    <slot />
+  </g>
+{/if}
diff --git a/packages/layerchart/src/lib/components/HitCanvas.svelte b/packages/layerchart/src/lib/components/HitCanvas.svelte
index 5352fd59a..4a7145f4c 100644
--- a/packages/layerchart/src/lib/components/HitCanvas.svelte
+++ b/packages/layerchart/src/lib/components/HitCanvas.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { scaleCanvas } from 'layercake';
+  import { createEventDispatcher } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
@@ -27,18 +25,6 @@
     };
   }>();
 
-  const cntxt = {
-    ctx: writable({}),
-  };
-
-  onMount(() => {
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently
-    scaleCanvas(context, $width, $height);
-  });
-
-  $: cntxt.ctx.set(context);
-  setContext('canvas', cntxt);
-
   function* rgbColorGenerator(step = 500) {
     let nextColor = 1;
 
@@ -124,9 +110,9 @@
       dispatch('click', { event: e, data });
     }
   }}
-/>
-
-<!-- Do not render while dragging to improve interaction performance -->
-{#if !$dragging}
-  <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
-{/if}
+>
+  <!-- Do not render while dragging to improve interaction performance -->
+  {#if !$dragging}
+    <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
+  {/if}
+</Canvas>
diff --git a/packages/layerchart/src/lib/components/Line.svelte b/packages/layerchart/src/lib/components/Line.svelte
index 957a3e627..e870df225 100644
--- a/packages/layerchart/src/lib/components/Line.svelte
+++ b/packages/layerchart/src/lib/components/Line.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick, type ComponentProps } from 'svelte';
+  import { onDestroy, tick, type ComponentProps } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
@@ -7,6 +7,8 @@
   import { uniqueId } from '@layerstack/utils';
 
   import Marker from './Marker.svelte';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   export let x1: number;
   export let initialX1 = x1;
@@ -20,6 +22,10 @@
   export let y2: number;
   export let initialY2 = y2;
 
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   /** Marker to attach to start and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -47,37 +53,70 @@
     tweened_x2.set(x2);
     tweened_y2.set(y2);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    const pathData = `M ${$tweened_x1},${$tweened_y1} L ${$tweened_x2},${$tweened_y2}`;
+    renderPathData(ctx, pathData, {
+      styles: { fill, stroke, strokeWidth },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Line', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_x1 && $tweened_y1 && $tweened_x2 && $tweened_y2;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<line
-  x1={$tweened_x1}
-  y1={$tweened_y1}
-  x2={$tweened_x2}
-  y2={$tweened_y2}
-  marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-  marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  class={cls($$props.stroke === undefined && 'stroke-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointermove
-  on:pointerleave
-/>
-
-<slot name="markerStart" id={markerStartId}>
-  {#if markerStart}
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <line
+    x1={$tweened_x1}
+    y1={$tweened_y1}
+    x2={$tweened_x2}
+    y2={$tweened_y2}
+    {fill}
+    {stroke}
+    stroke-width={strokeWidth}
+    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+    class={cls($$props.stroke === undefined && 'stroke-surface-content')}
+    {...$$restProps}
+    on:click
+    on:pointermove
+    on:pointerleave
+  />
+
+  <slot name="markerStart" id={markerStartId}>
+    {#if markerStart}
+      <Marker
+        id={markerStartId}
+        type={typeof markerStart === 'string' ? markerStart : undefined}
+        {...typeof markerStart === 'object' ? markerStart : null}
+      />
+    {/if}
+  </slot>
+
+  <slot name="markerEnd" id={markerEndId}>
     <Marker
-      id={markerStartId}
-      type={typeof markerStart === 'string' ? markerStart : undefined}
-      {...typeof markerStart === 'object' ? markerStart : null}
+      id={markerEndId}
+      type={typeof markerEnd === 'string' ? markerEnd : undefined}
+      {...typeof markerEnd === 'object' ? markerEnd : null}
     />
-  {/if}
-</slot>
-
-<slot name="markerEnd" id={markerEndId}>
-  <Marker
-    id={markerEndId}
-    type={typeof markerEnd === 'string' ? markerEnd : undefined}
-    {...typeof markerEnd === 'object' ? markerEnd : null}
-  />
-</slot>
+  </slot>
+{/if}
diff --git a/packages/layerchart/src/lib/components/LinearGradient.svelte b/packages/layerchart/src/lib/components/LinearGradient.svelte
index 44c448d16..a925ff520 100644
--- a/packages/layerchart/src/lib/components/LinearGradient.svelte
+++ b/packages/layerchart/src/lib/components/LinearGradient.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { uniqueId } from '@layerstack/utils';
 
+  import { chartContext } from './ChartContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { getComputedStyles } from '../utils/canvas.js';
+  import { parsePercent } from '../utils/math.js';
+
   /** Unique id for linearGradient */
   export let id: string = uniqueId('linearGradient-');
 
@@ -21,31 +27,88 @@
 
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
+
+  const { width, height, padding } = chartContext();
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  let canvasGradient: CanvasGradient;
+
+  function render(ctx: CanvasRenderingContext2D) {
+    // TODO: Use x1/y1/x2/y2 values (convert from pecentage strings)
+    const gradient = ctx.createLinearGradient(
+      $padding.left,
+      $padding.top,
+      vertical ? $padding.left : $width - $padding.right,
+      vertical ? $height + $padding.bottom : $padding.top
+    );
+
+    // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
+    stops.forEach((stop, i) => {
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(parsePercent(stop[0]), fill);
+      } else {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(i / (stops.length - 1), fill);
+      }
+    });
+
+    canvasGradient = gradient;
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    stops && x1 && y1 && x2 && y2 && $width && $height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<defs>
-  <linearGradient
-    {id}
-    {x1}
-    {y1}
-    {x2}
-    {y2}
-    gradientTransform={rotate ? `rotate(${rotate})` : ''}
-    gradientUnits={units}
-    {...$$restProps}
-  >
-    <slot name="stops">
-      {#if stops}
-        {#each stops as stop, i}
-          {#if Array.isArray(stop)}
-            <stop offset={stop[0]} stop-color={stop[1]} />
-          {:else}
-            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
-          {/if}
-        {/each}
-      {/if}
-    </slot>
-  </linearGradient>
-</defs>
-
-<slot {id} url="url(#{id})" />
+{#if renderContext === 'canvas'}
+  <slot {id} gradient={canvasGradient} />
+{:else if renderContext === 'svg'}
+  <defs>
+    <linearGradient
+      {id}
+      {x1}
+      {y1}
+      {x2}
+      {y2}
+      gradientTransform={rotate ? `rotate(${rotate})` : ''}
+      gradientUnits={units}
+      {...$$restProps}
+    >
+      <slot name="stops">
+        {#if stops}
+          {#each stops as stop, i}
+            {#if Array.isArray(stop)}
+              <stop offset={stop[0]} stop-color={stop[1]} />
+            {:else}
+              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+            {/if}
+          {/each}
+        {/if}
+      </slot>
+    </linearGradient>
+  </defs>
+
+  <slot {id} gradient="url(#{id})" />
+{/if}
diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
index 9fac7d4d8..3c5f0c95a 100644
--- a/packages/layerchart/src/lib/components/Points.svelte
+++ b/packages/layerchart/src/lib/components/Points.svelte
@@ -3,8 +3,7 @@
 </script>
 
 <script lang="ts">
-  import { getContext, type ComponentProps } from 'svelte';
-  import type { Readable } from 'svelte/store';
+  import { onDestroy, type ComponentProps } from 'svelte';
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
   import { notNull } from '@layerstack/utils';
@@ -13,6 +12,7 @@
   import Circle from './Circle.svelte';
   import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const context = chartContext() as any;
   const {
@@ -25,9 +25,6 @@
     yGet,
     cGet,
     rGet,
-    padding,
-    containerWidth,
-    containerHeight,
     config,
     radial,
   } = context;
@@ -45,8 +42,9 @@
   export let links: boolean | Partial<ComponentProps<Link>> = false;
 
   export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
   export let stroke: string | undefined = undefined;
-  export let strokeWidth: number | string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
 
   /** Render to canvas */
   export let render: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined =
@@ -55,9 +53,6 @@
   let className: string | undefined = undefined;
   export { className as class };
 
-  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
-  const DEFAULT_FILL = 'rgb(0, 0, 0)';
-
   function getOffset(value: any, offset: Offset, scale: AnyScale) {
     if (typeof offset === 'function') {
       return offset(value, context);
@@ -165,46 +160,31 @@
     }
   });
 
-  $: renderContext = canvas ? 'canvas' : 'svg';
-  $: ctx = canvas?.ctx;
-  $: if (renderContext === 'canvas' && $ctx) {
-    let computedStyles: Partial<CSSStyleDeclaration> = {};
-
-    // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if (className) {
-      $ctx.canvas.classList.add(...className.split(' '));
-      computedStyles = window.getComputedStyle($ctx.canvas);
-    }
-
-    // Clear with negative offset due to Canvas `context.translate(...)`
-    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
 
+  function _render(ctx: CanvasRenderingContext2D) {
     if (render) {
-      render($ctx, points);
+      render(ctx, points);
     } else {
-      points.forEach((point) => {
-        $ctx.beginPath();
-        $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
-
-        $ctx.lineWidth = Number(strokeWidth ?? 0);
-        $ctx.strokeStyle =
-          (stroke ?? computedStyles.stroke === 'none')
-            ? 'transparent'
-            : (computedStyles.stroke ?? '');
-        $ctx.stroke();
-
-        $ctx.fillStyle =
-          fill ??
-          (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
-          'transparent';
-        $ctx.fill();
-      });
+      // Rendered below
     }
   }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Points', render: _render });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
 <slot {points}>
-  {#if renderContext === 'svg'}
+  {#if renderContext === 'svg' || (renderContext === 'canvas' && !render)}
     {#if links}
       <g class="link-group">
         {#each _links as link}
@@ -225,7 +205,9 @@
           cy={$radial ? radialPoint[1] : point.y}
           r={point.r}
           fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+          {fillOpacity}
           {stroke}
+          {strokeWidth}
           class={className}
           {...$$restProps}
         />
diff --git a/packages/layerchart/src/lib/components/RadialGradient.svelte b/packages/layerchart/src/lib/components/RadialGradient.svelte
index 0b1bf6bd1..8a08c2c93 100644
--- a/packages/layerchart/src/lib/components/RadialGradient.svelte
+++ b/packages/layerchart/src/lib/components/RadialGradient.svelte
@@ -1,6 +1,12 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte';
   import { uniqueId } from '@layerstack/utils';
 
+  import { chartContext } from './ChartContext.svelte';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { getComputedStyles } from '../utils/canvas.js';
+  import { parsePercent } from '../utils/math.js';
+
   /** Unique id for linearGradient */
   export let id: string = uniqueId('radialGradient-');
 
@@ -25,33 +31,85 @@
 
   /** Define the coordinate system for attributes (i.e. gradientUnits) */
   export let units: 'objectBoundingBox' | 'userSpaceOnUse' = 'objectBoundingBox';
+
+  const { width, height, padding } = chartContext();
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  let canvasGradient: CanvasGradient;
+
+  function render(ctx: CanvasRenderingContext2D) {
+    // TODO: Set correct values: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient.  See also: LinearGradient
+    const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, 0);
+
+    // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
+    stops.forEach((stop, i) => {
+      if (Array.isArray(stop)) {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop[1] },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(parsePercent(stop[0]), fill);
+      } else {
+        const { fill } = getComputedStyles(ctx.canvas, {
+          styles: { fill: stop },
+          classes: $$props.class,
+        });
+        gradient.addColorStop(i / (stops.length - 1), fill);
+      }
+    });
+
+    canvasGradient = gradient;
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Gradient', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    stops && cx && cy && fx && fy && $width && $height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<defs>
-  <radialGradient
-    {id}
-    {cx}
-    {cy}
-    {fx}
-    {fy}
-    {r}
-    {spreadMethod}
-    gradientTransform={transform}
-    gradientUnits={units}
-    {...$$restProps}
-  >
-    <slot name="stops">
-      {#if stops}
-        {#each stops as stop, i}
-          {#if Array.isArray(stop)}
-            <stop offset={stop[0]} stop-color={stop[1]} />
-          {:else}
-            <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
-          {/if}
-        {/each}
-      {/if}
-    </slot>
-  </radialGradient>
-</defs>
-
-<slot {id} url="url(#{id})" />
+{#if renderContext === 'canvas'}
+  <slot {id} gradient={canvasGradient} />
+{:else if renderContext === 'svg'}
+  <defs>
+    <radialGradient
+      {id}
+      {cx}
+      {cy}
+      {fx}
+      {fy}
+      {r}
+      {spreadMethod}
+      gradientTransform={transform}
+      gradientUnits={units}
+      {...$$restProps}
+    >
+      <slot name="stops">
+        {#if stops}
+          {#each stops as stop, i}
+            {#if Array.isArray(stop)}
+              <stop offset={stop[0]} stop-color={stop[1]} />
+            {:else}
+              <stop offset="{i * (100 / (stops.length - 1))}%" stop-color={stop} />
+            {/if}
+          {/each}
+        {/if}
+      </slot>
+    </radialGradient>
+  </defs>
+
+  <slot {id} gradient="url(#{id})" />
+{/if}
diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
index 08600db1c..d05b14083 100644
--- a/packages/layerchart/src/lib/components/Rect.svelte
+++ b/packages/layerchart/src/lib/components/Rect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import {
@@ -8,6 +8,8 @@
     type SpringOptions,
     type TweenedOptions,
   } from '$lib/stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderRect } from 'layerchart/utils/canvas.js';
 
   export let x = 0;
   export let initialX = x;
@@ -21,6 +23,11 @@
   export let height: number;
   export let initialHeight = height;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   export let spring: boolean | SpringOptions | { [prop: string]: SpringOptions } = undefined;
   export let tweened: boolean | TweenedOptions | { [prop: string]: TweenedOptions } = undefined;
 
@@ -35,22 +42,59 @@
     tweened_width.set(width);
     tweened_height.set(height);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderRect(
+      ctx,
+      { x: $tweened_x, y: $tweened_y, width: $tweened_width, height: $tweened_height },
+      {
+        styles: { fill, fillOpacity, stroke, strokeWidth },
+        classes: $$props.class,
+      }
+    );
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Rect', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    $tweened_x && $tweened_y && $tweened_width && $tweened_height;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<rect
-  x={$tweened_x}
-  y={$tweened_y}
-  width={$tweened_width}
-  height={$tweened_height}
-  class={cls($$props.fill == null && 'fill-surface-content')}
-  {...$$restProps}
-  on:click
-  on:pointerenter
-  on:pointerover
-  on:pointermove
-  on:pointerout
-  on:pointerleave
-  on:dblclick
-/>
+{#if renderContext === 'svg'}
+  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <rect
+    x={$tweened_x}
+    y={$tweened_y}
+    width={$tweened_width}
+    height={$tweened_height}
+    class={cls($$props.fill == null && 'fill-surface-content')}
+    {fill}
+    fill-opacity={fillOpacity}
+    {stroke}
+    stroke-width={strokeWidth}
+    {...$$restProps}
+    on:click
+    on:pointerenter
+    on:pointerover
+    on:pointermove
+    on:pointerout
+    on:pointerleave
+    on:dblclick
+  />
+{/if}
diff --git a/packages/layerchart/src/lib/components/Rule.svelte b/packages/layerchart/src/lib/components/Rule.svelte
index 704e87f53..3c5ad1edc 100644
--- a/packages/layerchart/src/lib/components/Rule.svelte
+++ b/packages/layerchart/src/lib/components/Rule.svelte
@@ -67,7 +67,7 @@
         {x2}
         {y2}
         {...$$restProps}
-        class={cls('test grid stroke-surface-content/10', $$props.class)}
+        class={cls('stroke-surface-content/10', $$props.class)}
       />
     {:else}
       <Line
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index bd719d5c9..6f5fff0b7 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/packages/layerchart/src/lib/components/Spline.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick, type ComponentProps } from 'svelte';
+  import { onDestroy, tick, type ComponentProps } from 'svelte';
   import { writable } from 'svelte/store';
   import { tweened as tweenedStore } from 'svelte/motion';
   import { draw as _drawTransition } from 'svelte/transition';
@@ -21,6 +21,8 @@
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
   import { flattenPathData } from '../utils/path.js';
+  import { renderPathData } from '../utils/canvas.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
 
   const {
     data: contextData,
@@ -61,6 +63,11 @@
   export let curve: CurveFactory | CurveFactoryLineOnly | undefined = undefined;
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+  export let opacity: number | undefined = undefined;
+
   /** Marker to attach to start, mid, and end points of path */
   export let marker: ComponentProps<Marker>['type'] | ComponentProps<Marker> | undefined =
     undefined;
@@ -153,6 +160,31 @@
     key = Symbol();
   }
 
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    renderPathData(ctx, $tweened_d, {
+      styles: { stroke, fill, strokeWidth, opacity },
+      classes: $$props.class,
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Spline', render });
+
+    tweened_d.subscribe(() => {
+      canvasContext.invalidate();
+    });
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
+
   let pathEl: SVGPathElement | undefined = undefined;
   const startPoint = writable<DOMPoint | undefined>(undefined);
   $: endPoint = motionStore<DOMPoint | undefined>(undefined, {
@@ -187,63 +219,69 @@
   }
 </script>
 
-{#key key}
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <path
-    d={$tweened_d}
-    {...$$restProps}
-    class={cls(
-      'path-line',
-      !$$props.fill && 'fill-none',
-      !$$props.stroke && 'stroke-surface-content',
-      $$props.class
-    )}
-    marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
-    marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
-    marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-    in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
-    on:click
-    on:pointerenter
-    on:pointermove
-    on:pointerleave
-    bind:this={pathEl}
-  />
-
-  <slot name="markerStart" id={markerStartId}>
-    {#if markerStart}
+{#if renderContext === 'svg'}
+  {#key key}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <path
+      d={$tweened_d}
+      {...$$restProps}
+      class={cls(
+        'path-line',
+        !$$props.fill && 'fill-none',
+        !$$props.stroke && 'stroke-surface-content',
+        $$props.class
+      )}
+      {fill}
+      {stroke}
+      stroke-width={strokeWidth}
+      {opacity}
+      marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
+      marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
+      marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
+      in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
+      on:click
+      on:pointerenter
+      on:pointermove
+      on:pointerleave
+      bind:this={pathEl}
+    />
+
+    <slot name="markerStart" id={markerStartId}>
+      {#if markerStart}
+        <Marker
+          id={markerStartId}
+          type={typeof markerStart === 'string' ? markerStart : undefined}
+          {...typeof markerStart === 'object' ? markerStart : null}
+        />
+      {/if}
+    </slot>
+
+    <slot name="markerMid" id={markerMidId}>
       <Marker
-        id={markerStartId}
-        type={typeof markerStart === 'string' ? markerStart : undefined}
-        {...typeof markerStart === 'object' ? markerStart : null}
+        id={markerMidId}
+        type={typeof markerMid === 'string' ? markerMid : undefined}
+        {...typeof markerMid === 'object' ? markerMid : null}
       />
-    {/if}
-  </slot>
+    </slot>
 
-  <slot name="markerMid" id={markerMidId}>
-    <Marker
-      id={markerMidId}
-      type={typeof markerMid === 'string' ? markerMid : undefined}
-      {...typeof markerMid === 'object' ? markerMid : null}
-    />
-  </slot>
+    <slot name="markerEnd" id={markerEndId}>
+      <Marker
+        id={markerEndId}
+        type={typeof markerEnd === 'string' ? markerEnd : undefined}
+        {...typeof markerEnd === 'object' ? markerEnd : null}
+      />
+    </slot>
 
-  <slot name="markerEnd" id={markerEndId}>
-    <Marker
-      id={markerEndId}
-      type={typeof markerEnd === 'string' ? markerEnd : undefined}
-      {...typeof markerEnd === 'object' ? markerEnd : null}
-    />
-  </slot>
-
-  {#if $$slots.start && $startPoint}
-    <Group x={$startPoint.x} y={$startPoint.y}>
-      <slot name="start" point={$startPoint} />
-    </Group>
-  {/if}
-
-  {#if $$slots.end && $endPoint}
-    <Group x={$endPoint.x} y={$endPoint.y}>
-      <slot name="end" point={$endPoint} />
-    </Group>
-  {/if}
-{/key}
+    {#if $$slots.start && $startPoint}
+      <Group x={$startPoint.x} y={$startPoint.y}>
+        <slot name="start" point={$startPoint} />
+      </Group>
+    {/if}
+
+    {#if $$slots.end && $endPoint}
+      <Group x={$endPoint.x} y={$endPoint.y}>
+        <slot name="end" point={$endPoint} />
+      </Group>
+    {/if}
+  {/key}
+{/if}
diff --git a/packages/layerchart/src/lib/components/Text.svelte b/packages/layerchart/src/lib/components/Text.svelte
index 1efcd441c..e9cfbcc3d 100644
--- a/packages/layerchart/src/lib/components/Text.svelte
+++ b/packages/layerchart/src/lib/components/Text.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { cls } from '@layerstack/tailwind';
 
   import { getStringWidth } from '$lib/utils/string.js';
   import { motionStore } from '$lib/stores/motionStore.js';
+  import { getCanvasContext } from './layout/Canvas.svelte';
+  import { renderText } from 'layerchart/utils/canvas.js';
 
   /*
     TODO:
@@ -58,6 +60,11 @@
   /** Rotational angle of the text */
   export let rotate: number | undefined = undefined;
 
+  export let fill: string | undefined = undefined;
+  export let fillOpacity: number | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | undefined = undefined;
+
   let wordsByLines: { words: string[]; width?: number }[] = [];
   let wordsWithWidth: { word: string; width: number }[] = [];
   let spaceWidth: number = 0;
@@ -97,8 +104,13 @@
   /**
    * Convert css value to pixel value (ex. 0.71em => 11.36)
    */
-  function getPixelValue(cssValue: string) {
+  function getPixelValue(cssValue: number | string) {
     // TODO: Properly measure pixel values using DOM (handle inherited font size, zoom, etc)
+
+    if (typeof cssValue === 'number') {
+      return cssValue;
+    }
+
     // @ts-expect-error
     const [match, value, units] = cssValue.match(/([\d.]+)(\D+)/);
     const number = Number(value);
@@ -162,25 +174,71 @@
     tweened_x.set(x);
     tweened_y.set(y);
   });
+
+  const canvasContext = getCanvasContext();
+  const renderContext = canvasContext ? 'canvas' : 'svg';
+
+  function render(ctx: CanvasRenderingContext2D) {
+    wordsByLines.forEach((line, index) => {
+      renderText(
+        ctx,
+        line.words.join(' '),
+        {
+          x: getPixelValue($tweened_x) + getPixelValue(dx),
+          y:
+            getPixelValue($tweened_y) +
+            getPixelValue(dy) +
+            (index === 0 ? startDy : getPixelValue(lineHeight)),
+        },
+        {
+          styles: { fill, fillOpacity, stroke, strokeWidth, paintOrder: 'stroke', textAnchor },
+          classes: cls(fill === undefined && 'fill-surface-content', $$props.class),
+        }
+      );
+    });
+  }
+
+  let canvasUnregister: ReturnType<typeof canvasContext.register>;
+  $: if (renderContext === 'canvas') {
+    canvasUnregister = canvasContext.register({ name: 'Text', render });
+  }
+
+  $: if (renderContext === 'canvas') {
+    // Redraw when props changes (TODO: styles, class, etc)
+    value && $tweened_x && $tweened_y;
+    canvasContext.invalidate();
+  }
+
+  onDestroy(() => {
+    if (renderContext === 'canvas') {
+      canvasUnregister();
+    }
+  });
 </script>
 
-<!-- `overflow: visible` allow contents to be shown outside element -->
-<!-- `paint-order: stroke` supports stroke outlining text  -->
-<svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
-  {#if isValidXOrY(x) && isValidXOrY(y)}
-    <text
-      x={$tweened_x}
-      y={$tweened_y}
-      {transform}
-      text-anchor={textAnchor}
-      {...$$restProps}
-      class={cls($$props.fill === undefined && 'fill-surface-content', $$props.class)}
-    >
-      {#each wordsByLines as line, index}
-        <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
-          {line.words.join(' ')}
-        </tspan>
-      {/each}
-    </text>
-  {/if}
-</svg>
+{#if renderContext === 'svg'}
+  <!-- `overflow: visible` allow contents to be shown outside element -->
+  <!-- `paint-order: stroke` supports stroke outlining text  -->
+  <svg x={dx} y={dy} class="overflow-visible [paint-order:stroke]">
+    {#if isValidXOrY(x) && isValidXOrY(y)}
+      <text
+        x={$tweened_x}
+        y={$tweened_y}
+        {transform}
+        text-anchor={textAnchor}
+        {...$$restProps}
+        {fill}
+        fill-opacity={fillOpacity}
+        {stroke}
+        stroke-width={strokeWidth}
+        class={cls(fill === undefined && 'fill-surface-content', $$props.class)}
+      >
+        {#each wordsByLines as line, index}
+          <tspan x={$tweened_x} dy={index === 0 ? startDy : lineHeight}>
+            {line.words.join(' ')}
+          </tspan>
+        {/each}
+      </text>
+    {/if}
+  </svg>
+{/if}
diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
index 99c9bf0d8..7681a4999 100644
--- a/packages/layerchart/src/lib/components/charts/AreaChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -7,6 +7,7 @@
 
   import Area from '../Area.svelte';
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -18,7 +19,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -30,6 +36,7 @@
     rule?: typeof rule;
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -74,6 +81,8 @@
     labels?: Partial<ComponentProps<Labels>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -126,7 +135,7 @@
           ? s.value[1]
           : (s.value ?? s.key),
       fill: s.color,
-      'fill-opacity': 0.3,
+      fillOpacity: 0.3,
       ...props.area,
       ...s.props,
       line: {
@@ -151,12 +160,7 @@
   yBaseline={0}
   yNice
   {radial}
-  padding={radial || axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={radial ? undefined : defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
   let:x
@@ -186,7 +190,7 @@
   }}
 
   <slot {...slotProps}>
-    <Svg center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -261,7 +265,7 @@
       {#if labels}
         <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}
diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
index 8dca8ff04..2d51f4cac 100644
--- a/packages/layerchart/src/lib/components/charts/BarChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -7,6 +7,7 @@
 
   import Axis from '../Axis.svelte';
   import Bars from '../Bars.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -16,7 +17,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   type ChartProps = ComponentProps<Chart<TData>>;
 
@@ -32,6 +38,7 @@
     rule?: typeof rule;
     series?: typeof series;
     seriesLayout?: typeof seriesLayout;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -111,6 +118,8 @@
     labels?: Partial<ComponentProps<Labels>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) =>
       s.data?.map((d) => {
@@ -195,12 +204,7 @@
   {y1Range}
   c={isVertical ? y : x}
   cRange={['hsl(var(--color-primary))']}
-  padding={axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'band' }}
   {...$$restProps}
   let:x
@@ -229,7 +233,7 @@
     getBarsProps,
   }}
   <slot {...slotProps}>
-    <Svg>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid
@@ -301,7 +305,7 @@
       {#if labels}
         <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}
diff --git a/packages/layerchart/src/lib/components/charts/LineChart.svelte b/packages/layerchart/src/lib/components/charts/LineChart.svelte
index fd8b76698..d2bda138f 100644
--- a/packages/layerchart/src/lib/components/charts/LineChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/LineChart.svelte
@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -15,7 +16,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -26,6 +32,7 @@
     props?: typeof props;
     rule?: typeof rule;
     series?: typeof series;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -65,6 +72,8 @@
     points?: Partial<ComponentProps<Points>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData & { stackData?: any }>;
@@ -99,12 +108,7 @@
   yBaseline={0}
   yNice
   {radial}
-  padding={radial || axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={radial ? undefined : defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'bisect-x' }}
   {...$$restProps}
   let:x
@@ -133,7 +137,7 @@
     getSplineProps,
   }}
   <slot {...slotProps}>
-    <Svg center={radial}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} center={radial}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x={radial} y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -203,7 +207,7 @@
           />
         {/each}
       </slot>
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}
diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
index 6c1f8d638..53161f99c 100644
--- a/packages/layerchart/src/lib/components/charts/PieChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Arc from '../Arc.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Group from '../Group.svelte';
   import Legend from '../Legend.svelte';
@@ -30,6 +31,7 @@
     range?: typeof range;
     series?: typeof series;
     value?: typeof label;
+    renderContext?: typeof renderContext;
   }
 
   export let data: ChartProps['data'] = [];
@@ -98,6 +100,8 @@
     legend?: Partial<ComponentProps<Legend>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   $: allSeriesData = series
     .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
     .filter((d) => d) as Array<TData>;
@@ -151,7 +155,7 @@
     tooltip,
   }}
   <slot {...slotProps}>
-    <Svg {center}>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg} {center}>
       <slot name="belowMarks" {...slotProps} />
 
       <slot name="marks" {...slotProps}>
@@ -216,7 +220,7 @@
       </slot>
 
       <slot name="aboveMarks" {...slotProps} />
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}
diff --git a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
index d29f630bd..9d18083e3 100644
--- a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
+++ b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
@@ -4,6 +4,7 @@
   import { format } from '@layerstack/utils';
 
   import Axis from '../Axis.svelte';
+  import Canvas from '../layout/Canvas.svelte';
   import Chart from '../Chart.svelte';
   import Grid from '../Grid.svelte';
   import Highlight from '../Highlight.svelte';
@@ -14,7 +15,12 @@
   import Svg from '../layout/Svg.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    defaultChartPadding,
+    type Accessor,
+  } from '../../utils/common.js';
 
   interface $$Props extends ComponentProps<Chart<TData>> {
     axis?: typeof axis;
@@ -23,6 +29,7 @@
     legend?: typeof legend;
     props?: typeof props;
     series?: typeof series;
+    renderContext?: typeof renderContext;
   }
 
   export let data: $$Props['data'] = [];
@@ -55,6 +62,8 @@
     rule?: Partial<ComponentProps<Rule>>;
   } = {};
 
+  export let renderContext: 'svg' | 'canvas' = 'svg';
+
   // Default xScale based on first data's `x` value
   $: xScale =
     $$props.xScale ??
@@ -74,7 +83,7 @@
       data: s.data,
       stroke: s.color,
       fill: s.color,
-      'fill-opacity': 0.3,
+      fillOpacity: 0.3,
       ...props.points,
       ...s.props,
     };
@@ -90,12 +99,7 @@
   {y}
   {yScale}
   yNice
-  padding={axis === false
-    ? undefined
-    : {
-        left: axis === true || axis === 'y' ? 16 : 0,
-        bottom: (axis === true || axis === 'x' ? 16 : 0) + (legend === true ? 32 : 0),
-      }}
+  padding={defaultChartPadding(axis, legend)}
   tooltip={{ mode: 'voronoi' }}
   {...$$restProps}
   let:x
@@ -117,7 +121,7 @@
     : null}
 
   <slot {...slotProps}>
-    <Svg>
+    <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
       <slot name="grid" {...slotProps}>
         {#if grid}
           <Grid x y {...typeof grid === 'object' ? grid : null} {...props.grid} />
@@ -171,7 +175,7 @@
           {...typeof labels === 'object' ? labels : null}
         />
       {/if}
-    </Svg>
+    </svelte:component>
 
     <slot name="legend" {...slotProps}>
       {#if legend}
diff --git a/packages/layerchart/src/lib/components/layout/Canvas.svelte b/packages/layerchart/src/lib/components/layout/Canvas.svelte
index 7df807ad5..53b10696e 100644
--- a/packages/layerchart/src/lib/components/layout/Canvas.svelte
+++ b/packages/layerchart/src/lib/components/layout/Canvas.svelte
@@ -1,11 +1,36 @@
+<script lang="ts" context="module">
+  import { getContext, onDestroy, setContext } from 'svelte';
+
+  type ComponentRender = {
+    name: string;
+    render: (ctx: CanvasRenderingContext2D) => any;
+    retainState?: boolean;
+  };
+
+  export type CanvasContext = {
+    /** Register component to render.  Returns method to unregister on component destory */
+    register(component: ComponentRender): () => void;
+    invalidate(): void;
+  };
+
+  export const canvasContextKey = Symbol();
+
+  export function getCanvasContext() {
+    return getContext<CanvasContext>(canvasContextKey);
+  }
+
+  function setCanvasContext(context: CanvasContext) {
+    setContext(canvasContextKey, context);
+  }
+</script>
+
 <script lang="ts">
-  import { onMount, setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import { scaleCanvas } from 'layercake';
+  import { onMount } from 'svelte';
   import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
+  import { scaleCanvas } from '../../utils/canvas.js';
 
   const { width, height, containerWidth, containerHeight, padding } = chartContext();
 
@@ -38,21 +63,44 @@
   /** A string passed to `aria-describedby` property on the `<canvas>` tag. */
   export let describedBy: string | undefined = undefined;
 
-  const ctx = writable({});
+  /**
+   * Translate children to center (useful for radial layouts)
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
+  let components = new Map<Symbol, ComponentRender>();
+  let pendingInvalidation = false;
+  let frameId: number | undefined;
+
+  const { mode, scale, translate } = transformContext();
 
   onMount(() => {
     context = element?.getContext('2d', { willReadFrequently }) as CanvasRenderingContext2D;
   });
 
-  const { mode, scale, translate } = transformContext();
+  onDestroy(() => {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+  });
 
-  $: if (context) {
+  function update() {
+    if (!context) return;
+    // TODO: only `scaleCanvas()` when containerWidth/Height change (not all invalidations)
+    // scaleCanvas in `update()` to fix `requestAnimationFrame()` timing causing flash of blank canvas
     scaleCanvas(context, $containerWidth, $containerHeight);
+
     context.clearRect(0, 0, $containerWidth, $containerHeight);
 
     context.translate($padding.left ?? 0, $padding.top ?? 0);
 
-    if (mode === 'canvas') {
+    if (center) {
+      const newTranslate = {
+        x: center === 'x' || center === true ? $width / 2 : 0,
+        y: center === 'y' || center === true ? $height / 2 : 0,
+      };
+      context.translate(newTranslate.x, newTranslate.y);
+    } else if (mode === 'canvas') {
       const center = { x: $width / 2, y: $height / 2 };
       const newTranslate = {
         x: $translate.x * $scale + center.x - center.x * $scale,
@@ -62,12 +110,46 @@
       context.scale($scale, $scale);
     }
 
-    // Force children to re-draw
-    $ctx = context;
+    components.forEach((c) => {
+      if (c.retainState) {
+        // Do not call save/restore canvas draw state (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save) (ex. Group ctx.translate() affecting children)
+        c.render(context);
+      } else {
+        context.save();
+        c.render(context);
+        context.restore();
+      }
+    });
+
+    pendingInvalidation = false;
+  }
+
+  const canvasContext: CanvasContext = {
+    register(component) {
+      const key = Symbol();
+      components.set(key, component);
+      this.invalidate();
+
+      // Unregister
+      return () => {
+        components.delete(key);
+        this.invalidate();
+      };
+    },
+    invalidate() {
+      if (pendingInvalidation) return;
+      pendingInvalidation = true;
+      frameId = requestAnimationFrame(update);
+    },
+  };
+
+  $: {
+    // Redraw when resized
+    $containerWidth, $containerHeight;
+    canvasContext.invalidate();
   }
 
-  $: ctx.set(context);
-  setContext('canvas', { ctx });
+  setCanvasContext(canvasContext);
 </script>
 
 <canvas
diff --git a/packages/layerchart/src/lib/components/layout/Svg.svelte b/packages/layerchart/src/lib/components/layout/Svg.svelte
index 35f014c57..397b97fa4 100644
--- a/packages/layerchart/src/lib/components/layout/Svg.svelte
+++ b/packages/layerchart/src/lib/components/layout/Svg.svelte
@@ -32,7 +32,7 @@
   export let title: string | undefined = undefined;
 
   /**
-   * Translate children to center, useful for radial layouts
+   * Translate children to center (useful for radial layouts)
    */
   export let center: boolean | 'x' | 'y' = false;
 
diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
new file mode 100644
index 000000000..b00ed1cdc
--- /dev/null
+++ b/packages/layerchart/src/lib/utils/canvas.ts
@@ -0,0 +1,236 @@
+export const DEFAULT_FILL = 'rgb(0, 0, 0)';
+
+const CANVAS_STYLES_ELEMENT_ID = '__layerchart_canvas_styles_id';
+
+type ComputedStylesOptions = {
+  styles?: Partial<
+    Omit<CSSStyleDeclaration, 'fillOpacity' | 'strokeWidth' | 'opacity'> & {
+      fillOpacity?: number | string;
+      strokeWidth?: number | string;
+      opacity?: number | string;
+    }
+  >;
+  classes?: string;
+};
+
+/**
+ * Appends or reuses `<svg>` element below `<canvas>` to resolve CSS variables and classes (ex. `stroke: hsl(var(--color-primary))` => `stroke: rgb(...)` )
+ */
+export function getComputedStyles(
+  canvas: HTMLCanvasElement,
+  { styles, classes }: ComputedStylesOptions = {}
+) {
+  try {
+    // Get or create `<svg>` below `<canvas>`
+    let svg = document.getElementById(CANVAS_STYLES_ELEMENT_ID) as SVGElement | null;
+
+    if (!svg) {
+      svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('id', CANVAS_STYLES_ELEMENT_ID);
+      svg.style.display = 'none';
+      // Add `<svg>` next to `<canvas>` to allow same scope resolution for CSS variables
+      canvas.after(svg);
+    }
+    svg = svg!; // guarantee SVG is set
+
+    // Remove any previously set styles or classes.  Not able to do as part of cleanup below as `window.getComputedStyles()` appearing to be lazily read and removing `style` results in incorrect values, and copying result is very slow
+    svg.removeAttribute('style');
+    svg.removeAttribute('class');
+
+    // Add styles and class to svg element
+    if (styles) {
+      Object.assign(svg.style, styles);
+    }
+
+    if (classes) {
+      svg.setAttribute('class', classes);
+    }
+
+    const computedStyles = window.getComputedStyle(svg);
+    return computedStyles;
+  } catch (e) {
+    console.error('Unable to get computed styles', e);
+    return {} as CSSStyleDeclaration;
+  }
+}
+
+/** Render onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+function render(
+  canvasCtx: CanvasRenderingContext2D,
+  render: {
+    stroke: (canvasCtx: CanvasRenderingContext2D) => void;
+    fill: (canvasCtx: CanvasRenderingContext2D) => void;
+  },
+  styleOptions: ComputedStylesOptions = {}
+) {
+  // TODO: Consider memoizing?  How about reactiving to CSS variable changes (light/dark mode toggle)
+  const computedStyles = getComputedStyles(canvasCtx.canvas, styleOptions);
+
+  // 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'];
+
+  if (computedStyles?.opacity) {
+    canvasCtx.globalAlpha = Number(computedStyles?.opacity);
+  }
+
+  // Text properties
+  canvasCtx.font = `${computedStyles.fontSize} ${computedStyles.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') {
+    canvasCtx.textAlign = 'center';
+  } else if (computedStyles.textAnchor === 'end') {
+    canvasCtx.textAlign = 'right';
+  } else {
+    canvasCtx.textAlign = computedStyles.textAlign as CanvasTextAlign; // TODO: Handle/map `justify` and `match-parent`?
+  }
+
+  // TODO: Handle `textBaseline` / `verticalAnchor` (Text)
+  // canvasCtx.textBaseline = 'top';
+  // canvasCtx.textBaseline = 'middle';
+  // canvasCtx.textBaseline = 'bottom';
+  // canvasCtx.textBaseline = 'alphabetic';
+  // canvasCtx.textBaseline = 'hanging';
+  // canvasCtx.textBaseline = 'ideographic';
+
+  // Dashed lines
+  if (computedStyles.strokeDasharray.includes(',')) {
+    const dashArray = computedStyles.strokeDasharray
+      .split(',')
+      .map((s) => Number(s.replace('px', '')));
+    canvasCtx.setLineDash(dashArray);
+  }
+
+  paintOrder.forEach((attr) => {
+    if (attr === 'fill') {
+      const fill =
+        (styleOptions.styles?.fill as any) instanceof CanvasGradient
+          ? styleOptions.styles?.fill
+          : ['none', DEFAULT_FILL].includes(computedStyles?.fill)
+            ? null
+            : computedStyles?.fill;
+
+      if (fill) {
+        const currentGlobalAlpha = canvasCtx.globalAlpha;
+        if (computedStyles?.fillOpacity) {
+          canvasCtx.globalAlpha = Number(computedStyles?.fillOpacity);
+        }
+
+        canvasCtx.fillStyle = fill;
+        render.fill(canvasCtx);
+
+        // Restore in case it was modified by `fillOpacity`
+        canvasCtx.globalAlpha = currentGlobalAlpha;
+      }
+    } else if (attr === 'stroke') {
+      const stroke =
+        (styleOptions.styles?.stroke as any) instanceof CanvasGradient
+          ? styleOptions.styles?.stroke
+          : computedStyles?.stroke === 'none'
+            ? null
+            : computedStyles?.stroke;
+      if (stroke) {
+        canvasCtx.lineWidth =
+          typeof computedStyles?.strokeWidth === 'string'
+            ? Number(computedStyles?.strokeWidth?.replace('px', ''))
+            : (computedStyles?.strokeWidth ?? 1);
+
+        canvasCtx.strokeStyle = stroke;
+        render.stroke(canvasCtx);
+      }
+    }
+  });
+}
+
+/** Render SVG path data onto canvas context.  Supports CSS variables and classes by tranferring to hidden `<svg>` element before retrieval) */
+export function renderPathData(
+  canvasCtx: CanvasRenderingContext2D,
+  pathData: string | null | undefined,
+  styleOptions: ComputedStylesOptions = {}
+) {
+  const path = new Path2D(pathData ?? '');
+
+  render(
+    canvasCtx,
+    {
+      fill: (ctx) => ctx.fill(path),
+      stroke: (ctx) => ctx.stroke(path),
+    },
+    styleOptions
+  );
+}
+
+export function renderText(
+  canvasCtx: CanvasRenderingContext2D,
+  text: string | number | null | undefined,
+  coords: { x: number; y: number },
+  styleOptions: ComputedStylesOptions = {}
+) {
+  if (text) {
+    render(
+      canvasCtx,
+      {
+        fill: (ctx) => ctx.fillText(text.toString(), coords.x, coords.y),
+        stroke: (ctx) => ctx.strokeText(text.toString(), coords.x, coords.y),
+      },
+      styleOptions
+    );
+  }
+}
+
+export function renderRect(
+  canvasCtx: CanvasRenderingContext2D,
+  coords: { x: number; y: number; width: number; height: number },
+  styleOptions: ComputedStylesOptions = {}
+) {
+  render(
+    canvasCtx,
+    {
+      fill: (ctx) => ctx.fillRect(coords.x, coords.y, coords.width, coords.height),
+      stroke: (ctx) => ctx.strokeRect(coords.x, coords.y, coords.width, coords.height),
+    },
+    styleOptions
+  );
+}
+
+/** Clear canvas accounting for Canvas `context.translate(...)` */
+export function clearCanvasContext(
+  canvasCtx: CanvasRenderingContext2D,
+  options: {
+    containerWidth: number;
+    containerHeight: number;
+    padding: {
+      top: number;
+      bottom: number;
+      left: number;
+      right: number;
+    };
+  }
+) {
+  // Clear with negative offset due to Canvas `context.translate(...)`
+  canvasCtx.clearRect(
+    -options.padding.left,
+    -options.padding.top,
+    options.containerWidth,
+    options.containerHeight
+  );
+}
+
+/**
+	Scales a canvas for high DPI / retina displays.
+  @see: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#examples
+  @see: https://web.dev/articles/canvas-hidipi
+*/
+export function scaleCanvas(ctx: CanvasRenderingContext2D, width: number, height: number) {
+  const devicePixelRatio = window.devicePixelRatio || 1;
+
+  ctx.canvas.width = width * devicePixelRatio;
+  ctx.canvas.height = height * devicePixelRatio;
+
+  ctx.canvas.style.width = `${width}px`;
+  ctx.canvas.style.height = `${height}px`;
+
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+  return { width: ctx.canvas.width, height: ctx.canvas.height };
+}
diff --git a/packages/layerchart/src/lib/utils/common.ts b/packages/layerchart/src/lib/utils/common.ts
index 6e005ac39..359959cbd 100644
--- a/packages/layerchart/src/lib/utils/common.ts
+++ b/packages/layerchart/src/lib/utils/common.ts
@@ -1,6 +1,8 @@
-import type Chart from '../components/Chart.svelte';
-import { get } from 'lodash-es';
 import type { ComponentProps } from 'svelte';
+import { get } from 'lodash-es';
+
+import type Chart from '../components/Chart.svelte';
+import type LineChart from '../components/charts/LineChart.svelte';
 
 export type Accessor<TData = any> =
   | number
@@ -37,3 +39,22 @@ export function chartDataArray<TData = any>(data: ComponentProps<Chart<TData>>['
     return data.descendants();
   }
 }
+
+// Using LineChart but could any simplified chart
+type SimplifiedChartProps = ComponentProps<LineChart<any>>;
+
+export function defaultChartPadding(
+  axis: SimplifiedChartProps['axis'],
+  legend: SimplifiedChartProps['legend']
+) {
+  if (axis === false) {
+    return undefined;
+  } else {
+    return {
+      top: axis === true || axis === 'y' ? 4 : 0,
+      left: axis === true || axis === 'y' ? 20 : 0,
+      bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend === true ? 32 : 0),
+      right: axis === true || axis === 'x' ? 4 : 0,
+    };
+  }
+}
diff --git a/packages/layerchart/src/lib/utils/index.ts b/packages/layerchart/src/lib/utils/index.ts
index 749c156b1..817db2b70 100644
--- a/packages/layerchart/src/lib/utils/index.ts
+++ b/packages/layerchart/src/lib/utils/index.ts
@@ -1,8 +1,10 @@
+export * from './canvas.js';
 export * from './common.js';
 export * from './geo.js';
 export * from './graph.js';
 export * from './hierarchy.js';
 export * from './math.js';
+export * from './path.js';
 export * from './pivot.js';
 export * from './stack.js';
 export * from './ticks.js';
diff --git a/packages/layerchart/src/lib/utils/math.ts b/packages/layerchart/src/lib/utils/math.ts
index f968bec88..120207e6d 100644
--- a/packages/layerchart/src/lib/utils/math.ts
+++ b/packages/layerchart/src/lib/utils/math.ts
@@ -53,3 +53,13 @@ export function celsiusToFahrenheit(temperature: number) {
 export function fahrenheitToCelsius(temperature: number) {
   return (temperature - 32) * (5 / 9);
 }
+
+/** Parse percent string (`50%`) to decimal (`0.5`) */
+export function parsePercent(percent: string | number) {
+  if (typeof percent === 'number') {
+    // Assume already decimal
+    return percent;
+  } else {
+    return Number(percent.replace('%', '')) / 100;
+  }
+}
diff --git a/packages/layerchart/src/lib/utils/path.ts b/packages/layerchart/src/lib/utils/path.ts
index d0b77e5d6..98305a127 100644
--- a/packages/layerchart/src/lib/utils/path.ts
+++ b/packages/layerchart/src/lib/utils/path.ts
@@ -21,13 +21,41 @@ export function circlePath(dimensions: {
   r: number;
   sweep?: 'inside' | 'outside';
 }) {
-  // sweep: 0 (inside), 1 (outside)
+  // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#arcs
   const { cx, cy, r, sweep = 'outside' } = dimensions;
+  // sweep: 0 (inside), 1 (outside)
+  const _sweep = sweep === 'outside' ? 1 : 0;
+
   return `
     M ${cx - r} ${cy}
-    a ${r},${r} 0 1,${sweep} ${r * 2},0
-    a ${r},${r} 0 1,${sweep} -${r * 2},0
+    a ${r},${r} 0 1,${_sweep} ${r * 2},0
+    a ${r},${r} 0 1,${_sweep} -${r * 2},0
+  `;
+}
+
+/** Create spike (triangle) using path data  */
+export function spikePath({
+  x,
+  y,
+  width,
+  height,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}) {
+  const startPoint = { x: x - width / 2, y };
+  const midPoint = { x, y: y - height };
+  const endPoint = { x: x + width / 2, y };
+
+  const pathData = `
+    M ${startPoint.x},${startPoint.y}
+    L ${midPoint.x},${midPoint.y}
+    L ${endPoint.x},${endPoint.y}
   `;
+
+  return pathData;
 }
 
 /** Flatten all `y` coordinates to `0` */
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
index 3ac5928f1..8e48c9ee4 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -54,7 +54,7 @@
     <Chart>
       <Svg center>
         {#key spring}
-          <LinearGradient class="from-secondary to-primary" vertical let:url>
+          <LinearGradient class="from-secondary to-primary" vertical let:gradient>
             <Arc
               {value}
               {domain}
@@ -67,7 +67,7 @@
               {spring}
               let:value
               let:boundingBox
-              fill={url}
+              fill={gradient}
               track={{ class: 'fill-surface-content/5' }}
             >
               <Text
@@ -116,7 +116,11 @@
     <div class="h-[200px] p-4 border rounded">
       <Chart>
         <Svg center>
-          <LinearGradient stops={['hsl(80, 100%, 50%)', 'hsl(200, 100%, 50%)']} vertical let:url>
+          <LinearGradient
+            stops={['hsl(80, 100%, 50%)', 'hsl(200, 100%, 50%)']}
+            vertical
+            let:gradient
+          >
             <Arc
               {value}
               {domain}
@@ -127,7 +131,7 @@
               {padAngle}
               {label}
               let:boundingBox
-              fill={url}
+              fill={gradient}
             >
               <!-- svg center -->
               <!-- <Text
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
index 5f3da31c9..08adf8b80 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
+  import type { Component, ComponentProps } from 'svelte';
 
-  import { Field, RangeField, Switch } from 'svelte-ux';
-  import { Area, Axis, Chart, Svg, Points } from 'layerchart';
+  import { Field, RangeField, Switch, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { Area, Axis, Chart, Svg, Points, Canvas, Spline } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import PathDataMenuField from '$lib/docs/PathDataMenuField.svelte';
@@ -13,6 +13,7 @@
   let showLine = true;
   let show = true;
   let tweened = true;
+  let Context: Component = Svg;
 
   let pathGenerator = (x: number) => x;
   let curve: ComponentProps<CurveMenuField>['value'] = undefined;
@@ -40,11 +41,18 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px,auto,1fr] gap-2">
+  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
 
+    <Field label="Context" classes={{ input: 'mt-1 mb-[6px]' }}>
+      <ToggleGroup bind:value={Context} variant="outline" size="sm">
+        <ToggleOption value={Svg}>Svg</ToggleOption>
+        <ToggleOption value={Canvas}>Canvas</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
     <Field label="Tweened" let:id>
       <Switch bind:checked={tweened} {id} size="md" />
     </Field>
@@ -57,6 +65,9 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
+      </Svg>
+
+      <svelte:component this={Context}>
         {#if show}
           <Area
             {curve}
@@ -64,11 +75,63 @@
             {tweened}
             class="fill-primary/10"
           />
+
           {#if showPoints}
             <Points {tweened} r={3} class="fill-surface-100 stroke-primary" />
           {/if}
         {/if}
+      </svelte:component>
+    </Chart>
+  </div>
+</Preview>
+
+<h1>Canvas</h1>
+
+<div class="grid gap-2 mb-2">
+  <div class="grid grid-cols-[1fr,1fr,1fr,auto,auto] gap-2">
+    <PathDataMenuField bind:value={pathGenerator} />
+    <CurveMenuField bind:value={curve} />
+    <RangeField label="Points" bind:value={pointCount} min={2} />
+    <Field label="Show points" let:id>
+      <Switch bind:checked={showPoints} {id} size="md" />
+    </Field>
+    <Field label="Show Line" let:id>
+      <Switch bind:checked={showLine} {id} size="md" />
+    </Field>
+  </div>
+
+  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
+    <Field label="Show" let:id>
+      <Switch bind:checked={show} {id} size="md" />
+    </Field>
+
+    <Field label="Tweened" let:id>
+      <Switch bind:checked={tweened} {id} size="md" />
+    </Field>
+  </div>
+</div>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" rule />
       </Svg>
+
+      <Canvas>
+        {#if show}
+          <Area {curve} {tweened} class="fill-primary/10" />
+
+          {#if showLine}
+            <Spline {curve} {tweened} class="stroke-primary stroke-2" />
+          {/if}
+
+          {#if showPoints}
+            <Points {tweened} r={3} class="fill-surface-100 stroke-primary" />
+          {/if}
+        {/if}
+      </Canvas>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
index e934a947f..c2e2e210f 100644
--- a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -10,7 +10,7 @@
     LinearGradient,
     Spline,
   } from 'layerchart';
-  import { PeriodType } from 'svelte-ux';
+  import { Field, PeriodType, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -45,25 +45,34 @@
   });
   const multiSeriesFlatData = pivotLonger(multiSeriesData, keys, 'fruit', 'value');
   const multiSeriesDataByFruit = group(multiSeriesFlatData, (d) => d.fruit);
+
+  let renderContext: 'svg' | 'canvas' = 'svg';
 </script>
 
 <h1>Examples</h1>
 
+<Field label="Render context">
+  <ToggleGroup bind:value={renderContext} variant="outline">
+    <ToggleOption value="svg">Svg</ToggleOption>
+    <ToggleOption value="canvas">Canvas</ToggleOption>
+  </ToggleGroup>
+</Field>
+
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" />
+    <AreaChart data={dateSeriesData} x="date" y="value" {renderContext} />
   </div>
 </Preview>
 
 <h2>Gradient</h2>
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value">
+    <AreaChart data={dateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="marks">
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
         </LinearGradient>
       </svelte:fragment>
     </AreaChart>
@@ -78,7 +87,7 @@
   }}
 
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={negativeDateSeriesData} x="date" y="value">
+    <AreaChart data={negativeDateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="marks" let:yScale let:height let:padding>
         {@const thresholdValue = 0}
         {@const thresholdOffset = yScale(thresholdValue) / (height + padding.bottom)}
@@ -89,13 +98,13 @@
           ]}
           units="userSpaceOnUse"
           vertical
-          let:url
+          let:gradient
         >
           <Area
             y0={(d) => thresholdValue}
-            line={{ stroke: url, class: 'stroke-2' }}
-            fill={url}
-            fill-opacity={0.2}
+            line={{ stroke: gradient, class: 'stroke-2' }}
+            fill={gradient}
+            fillOpacity={0.2}
           />
         </LinearGradient>
       </svelte:fragment>
@@ -131,6 +140,7 @@
       x="date"
       y="value"
       props={{ area: { curve: curveCatmullRom } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -153,6 +163,7 @@
           color: 'hsl(var(--color-warning))',
         },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -182,6 +193,7 @@
         },
       ]}
       tooltip={{ mode: 'voronoi' }}
+      {renderContext}
     >
       <svelte:fragment slot="marks" let:series let:tooltip>
         {#each series as s}
@@ -194,7 +206,7 @@
             data={s.data}
             line={{ class: 'stroke-2', stroke: color }}
             fill={color}
-            fill-opacity={0.3}
+            fillOpacity={0.3}
           />
         {/each}
       </svelte:fragment>
@@ -238,6 +250,7 @@
         },
       ]}
       seriesLayout="stack"
+      {renderContext}
     />
   </div>
 </Preview>
@@ -261,6 +274,7 @@
         },
       ]}
       seriesLayout="stackExpand"
+      {renderContext}
     />
   </div>
 </Preview>
@@ -284,6 +298,7 @@
         },
       ]}
       seriesLayout="stackDiverging"
+      {renderContext}
     />
   </div>
 </Preview>
@@ -307,6 +322,7 @@
         },
       ]}
       seriesLayout="stack"
+      {renderContext}
     >
       <svelte:fragment slot="marks" let:series let:getAreaProps>
         {#each series as s, i (s.key)}
@@ -314,9 +330,9 @@
           <LinearGradient
             stops={[s.color, 'color-mix(in lch, ' + s.color + ' 10%, transparent)']}
             vertical
-            let:url
+            let:gradient
           >
-            <Area {...getAreaProps(s, i)} fill={url} />
+            <Area {...getAreaProps(s, i)} fill={gradient} />
           </LinearGradient>
         {/each}
       </svelte:fragment>
@@ -328,7 +344,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" labels />
+    <AreaChart data={dateSeriesData} x="date" y="value" labels {renderContext} />
   </div>
 </Preview>
 
@@ -336,7 +352,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" points />
+    <AreaChart data={dateSeriesData} x="date" y="value" points {renderContext} />
   </div>
 </Preview>
 
@@ -352,7 +368,7 @@
       radial
       rule={{ class: 'stroke-surface-content/20' }}
       props={{
-        area: { line: false, 'fill-opacity': 1 },
+        area: { line: false, fillOpacity: 1 },
         xAxis: { format: PeriodType.Month, tickLength: 0 },
         yAxis: { ticks: 4, format: (v) => v + '° F' },
         highlight: { points: false },
@@ -371,6 +387,7 @@
           color: 'hsl(var(--color-primary) / 20%)',
         },
       ]}
+      {renderContext}
     >
       <svelte:fragment slot="belowMarks">
         <Spline y="avg" curve={curveCatmullRom} class="stroke-primary" />
@@ -383,7 +400,7 @@
 
 <Preview data={dateSeriesDataWithNulls}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesDataWithNulls} x="date" y="value" points />
+    <AreaChart data={dateSeriesDataWithNulls} x="date" y="value" points {renderContext} />
   </div>
 </Preview>
 
@@ -400,6 +417,7 @@
       axis={false}
       grid={false}
       props={{ highlight: { points: { r: 3, class: 'stroke-2 stroke-surface-100' } } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -408,7 +426,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" axis="x" />
+    <AreaChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} />
   </div>
 </Preview>
 
@@ -416,7 +434,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" axis="y" />
+    <AreaChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} />
   </div>
 </Preview>
 
@@ -440,6 +458,7 @@
       ]}
       seriesLayout="stack"
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -464,6 +483,7 @@
       ]}
       seriesLayout="stack"
       legend={{ placement: 'top-right' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -490,6 +510,7 @@
       ]}
       seriesLayout="stack"
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -498,7 +519,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value">
+    <AreaChart data={dateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
         <Tooltip.Root
           x={padding.left}
@@ -530,7 +551,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <AreaChart data={dateSeriesData} x="date" y="value" let:x let:y>
+    <AreaChart data={dateSeriesData} x="date" y="value" let:x let:y {renderContext}>
       <Svg>
         <Axis placement="left" grid rule />
         <Axis
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
index 8abacdcf8..02e5dae12 100644
--- a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -4,6 +4,7 @@
     Axis,
     BarChart,
     Bars,
+    Canvas,
     Highlight,
     Labels,
     LinearGradient,
@@ -17,6 +18,7 @@
   import Preview from '$lib/docs/Preview.svelte';
   import Blockquote from '$lib/docs/Blockquote.svelte';
   import { createDateSeries, wideData, longData } from '$lib/utils/genData.js';
+  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   export let data;
 
@@ -47,15 +49,24 @@
     value: 'integer',
     keys: ['value', 'baseline'],
   });
+
+  let renderContext: 'svg' | 'canvas' = 'svg';
 </script>
 
 <h1>Examples</h1>
 
+<Field label="Render context">
+  <ToggleGroup bind:value={renderContext} variant="outline">
+    <ToggleOption value="svg">Svg</ToggleOption>
+    <ToggleOption value="canvas">Canvas</ToggleOption>
+  </ToggleGroup>
+</Field>
+
 <h2>Vertical (default)</h2>
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" />
+    <BarChart data={dateSeriesData} x="date" y="value" {renderContext} />
   </div>
 </Preview>
 
@@ -63,7 +74,13 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={horizontalDateSeriesData} x="value" y="date" orientation="horizontal" />
+    <BarChart
+      data={horizontalDateSeriesData}
+      x="value"
+      y="date"
+      orientation="horizontal"
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -76,6 +93,7 @@
       x="date"
       y="value"
       props={{ bars: { class: 'fill-secondary' } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -84,7 +102,13 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" cRange={['hsl(var(--color-secondary))']} />
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      cRange={['hsl(var(--color-secondary))']}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -106,6 +130,7 @@
       props={{
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -122,6 +147,7 @@
       cScale={scaleThreshold()}
       cDomain={[0]}
       cRange={['hsl(var(--color-danger))', 'hsl(var(--color-success))']}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -130,16 +156,16 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value">
+    <BarChart data={dateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="marks" let:series let:getBarsProps>
         {#each series as s, i (s.key)}
           <LinearGradient
             class="from-blue-500 to-green-400"
             vertical
             units="userSpaceOnUse"
-            let:url
+            let:gradient
           >
-            <Bars {...getBarsProps(s, i)} fill={url} />
+            <Bars {...getBarsProps(s, i)} fill={gradient} />
           </LinearGradient>
         {/each}
       </svelte:fragment>
@@ -151,7 +177,13 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" props={{ highlight: { area: false } }}>
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      props={{ highlight: { area: false } }}
+      {renderContext}
+    >
       <svelte:fragment slot="belowMarks">
         <Highlight area={{ class: 'fill-surface-content/10' }} />
       </svelte:fragment>
@@ -174,6 +206,7 @@
           props: { inset: 16 },
         },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -190,6 +223,7 @@
         { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
         { key: 'value', color: 'hsl(var(--color-primary))', props: { inset: 8 } },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -214,6 +248,7 @@
           props: { inset: 16 },
         },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -236,6 +271,7 @@
           color: 'hsl(var(--color-secondary))',
         },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -265,6 +301,7 @@
           color: 'hsl(var(--color-secondary))',
         },
       ]}
+      {renderContext}
     >
       <svelte:fragment slot="tooltip" let:y let:series>
         <Tooltip.Root let:data>
@@ -319,6 +356,7 @@
           color: 'hsl(var(--color-secondary))',
         },
       ]}
+      {renderContext}
     >
       <svelte:fragment slot="tooltip" let:y let:series>
         <Tooltip.Root let:data>
@@ -372,6 +410,7 @@
         xAxis: { format: 'none' },
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -404,6 +443,7 @@
         xAxis: { format: 'metric' },
         yAxis: { format: 'none' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -438,6 +478,7 @@
         xAxis: { format: 'none' },
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -469,6 +510,7 @@
         xAxis: { format: 'none' },
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -501,6 +543,7 @@
         xAxis: { format: 'metric' },
         yAxis: { format: 'none' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -531,6 +574,7 @@
       props={{
         xAxis: { format: 'none' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -567,6 +611,7 @@
         xAxis: { format: 'none' },
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -603,6 +648,7 @@
         xAxis: { format: 'none' },
         yAxis: { format: 'metric' },
       }}
+      {renderContext}
     />
   </div>
 </Preview> -->
@@ -635,6 +681,7 @@
         yAxis: { format: 'metric' },
       }}
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -667,6 +714,7 @@
         yAxis: { format: 'metric' },
       }}
       legend={{ placement: 'top-right', classes: { root: 'mt-2' } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -702,6 +750,7 @@
         yAxis: { format: 'metric' },
       }}
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -710,7 +759,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" labels />
+    <BarChart data={dateSeriesData} x="date" y="value" labels {renderContext} />
   </div>
 </Preview>
 
@@ -718,7 +767,13 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" labels={{ placement: 'inside' }} />
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      labels={{ placement: 'inside' }}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -745,6 +800,7 @@
         },
       }}
       padding={{ left: 0, bottom: 16 }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -753,7 +809,15 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[500px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="value" y="date" labels orientation="horizontal" axis={false}>
+    <BarChart
+      data={dateSeriesData}
+      x="value"
+      y="date"
+      labels
+      orientation="horizontal"
+      axis={false}
+      {renderContext}
+    >
       <svelte:fragment slot="aboveMarks">
         <Labels x={8} value={(d) => d.date} class="text-sm fill-surface-300 stroke-none" />
       </svelte:fragment>
@@ -773,6 +837,7 @@
       grid={false}
       bandPadding={0.1}
       props={{ bars: { radius: 1, strokeWidth: 0 } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -801,6 +866,7 @@
         xAxis: { ticks: (scale) => scaleTime(scale.domain(), scale.range()).ticks() },
         rule: { y: false },
       }}
+      {renderContext}
     >
       <svelte:fragment slot="tooltip" let:x let:y let:c let:cScale>
         <Tooltip.Root let:data>
@@ -818,7 +884,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" axis="x" />
+    <BarChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} />
   </div>
 </Preview>
 
@@ -826,7 +892,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" axis="y" />
+    <BarChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} />
   </div>
 </Preview>
 
@@ -839,6 +905,7 @@
       x="date"
       y="value"
       props={{ xAxis: { ticks: (scale) => scaleTime(scale.domain(), scale.range()).ticks() } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -847,7 +914,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" grid={{ x: true }} />
+    <BarChart data={dateSeriesData} x="date" y="value" grid={{ x: true }} {renderContext} />
   </div>
 </Preview>
 
@@ -855,7 +922,13 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value" grid={{ x: true, bandAlign: 'between' }} />
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      grid={{ x: true, bandAlign: 'between' }}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -871,6 +944,7 @@
       yScale={scaleLog()}
       yDomain={[1, 100]}
       props={{ yAxis: { ticks: [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100] } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -879,7 +953,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <BarChart data={dateSeriesData} x="date" y="value">
+    <BarChart data={dateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="tooltip" let:x let:y>
         <Tooltip.Root let:data>
           <Tooltip.Header>{format(x(data), PeriodType.DayTime)}</Tooltip.Header>
@@ -897,7 +971,7 @@
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
     <BarChart data={dateSeriesData} x="date" y="value" let:x let:y>
-      <Svg>
+      <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis
           placement="left"
           grid
@@ -911,7 +985,7 @@
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
-      </Svg>
+      </svelte:component>
 
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(x(data))}</Tooltip.Header>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index 7a7974f3a..f8c2f6f58 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -186,8 +186,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
 
@@ -224,8 +224,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
 
@@ -263,8 +263,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
 
@@ -306,8 +306,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
           </Svg>
@@ -376,8 +376,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
           </Svg>
@@ -410,10 +410,10 @@
           <Svg>
             <Axis placement="left" grid rule tweened={{ duration: 200 }} />
             <Axis placement="bottom" rule />
-            <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+            <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
               <Area
                 line={{ class: 'stroke-2 stroke-primary' }}
-                fill={url}
+                fill={gradient}
                 tweened={{ duration: 200 }}
               />
             </LinearGradient>
@@ -478,9 +478,12 @@
                 <LinearGradient
                   class="from-[hsl(var(--chart-color)/50%)] to-transparent"
                   vertical
-                  let:url
+                  let:gradient
                 >
-                  <Area line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }} fill={url} />
+                  <Area
+                    line={{ class: 'stroke-2 stroke-[hsl(var(--chart-color))]' }}
+                    fill={gradient}
+                  />
                 </LinearGradient>
               </ChartClipPath>
             </Svg>
@@ -525,8 +528,8 @@
             <Axis placement="left" grid rule />
             <Axis placement="bottom" rule />
             <ChartClipPath>
-              <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+              <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+                <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
               </LinearGradient>
             </ChartClipPath>
             <Highlight points lines />
diff --git a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
index 136afcfbd..b12f490e0 100644
--- a/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Frame/+page.svelte
@@ -85,8 +85,8 @@
       padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
     >
       <Svg>
-        <LinearGradient class="from-primary/10 to-secondary/10" vertical let:url>
-          <Frame class="stroke-primary/10" fill={url} />
+        <LinearGradient class="from-primary/10 to-secondary/10" vertical let:gradient>
+          <Frame class="stroke-primary/10" fill={gradient} />
         </LinearGradient>
         <Axis placement="bottom" />
         <Axis placement="left" />
diff --git a/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte b/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
index 751e252de..13d439205 100644
--- a/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
@@ -2,7 +2,7 @@
   import { geoIdentity, type GeoProjection } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Chart, Canvas, GeoPath, HitCanvas, Tooltip } from 'layerchart';
+  import { Chart, Canvas, GeoPath, HitCanvas, Tooltip, renderPathData } from 'layerchart';
   import { Field, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -38,16 +38,15 @@
     >
       <Canvas>
         <GeoPath geojson={states} class="stroke-surface-content" />
-      </Canvas>
-      <Canvas>
         <GeoPath geojson={counties} class="stroke-surface-content/20" />
       </Canvas>
 
-      {#if tooltip.data}
-        <Canvas>
+      <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
+      <Canvas>
+        {#if tooltip.data}
           <GeoPath geojson={tooltip.data} class="stroke-surface-content fill-surface-content/20" />
-        </Canvas>
-      {/if}
+        {/if}
+      </Canvas>
 
       <HitCanvas
         let:nextColor
@@ -57,18 +56,13 @@
         {debug}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of counties.features) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
-
+              const geoPath = newGeoPath();
               // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
-              ctx.strokeStyle = color;
-              ctx.stroke();
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
index 230a9392a..78f791fce 100644
--- a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     Axis,
+    Canvas,
     Highlight,
     LinearGradient,
     LineChart,
@@ -12,7 +13,7 @@
   import { scaleBand, scaleSequential } from 'd3-scale';
   import { curveCatmullRom, curveLinearClosed } from 'd3-shape';
   import { extent, flatGroup, ticks } from 'd3-array';
-  import { PeriodType } from 'svelte-ux';
+  import { Field, PeriodType, ToggleGroup, ToggleOption } from 'svelte-ux';
   import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -62,15 +63,24 @@
   );
 
   let dynamicData = ticks(-2, 2, 200).map(Math.sin);
+
+  let renderContext: 'svg' | 'canvas' = 'svg';
 </script>
 
 <h1>Examples</h1>
 
+<Field label="Render context">
+  <ToggleGroup bind:value={renderContext} variant="outline">
+    <ToggleOption value="svg">Svg</ToggleOption>
+    <ToggleOption value="canvas">Canvas</ToggleOption>
+  </ToggleGroup>
+</Field>
+
 <h2>Basic</h2>
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" />
+    <LineChart data={dateSeriesData} x="date" y="value" {renderContext} />
   </div>
 </Preview>
 
@@ -82,6 +92,7 @@
       data={dateSeriesData}
       x="date"
       series={[{ key: 'value', color: 'hsl(var(--color-secondary))' }]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -95,6 +106,7 @@
       x="date"
       y="value"
       props={{ spline: { curve: curveCatmullRom } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -111,6 +123,7 @@
         { key: 'bananas', color: 'hsl(var(--color-success))' },
         { key: 'oranges', color: 'hsl(var(--color-warning))' },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -129,6 +142,7 @@
         { key: 'oranges', color: 'hsl(var(--color-warning))' },
       ]}
       tooltip={{ mode: 'voronoi' }}
+      {renderContext}
     >
       <svelte:fragment slot="marks" let:series let:tooltip>
         {#each series as s}
@@ -164,7 +178,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" labels={{ offset: 10 }} />
+    <LineChart data={dateSeriesData} x="date" y="value" labels={{ offset: 10 }} {renderContext} />
   </div>
 </Preview>
 
@@ -172,7 +186,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" points />
+    <LineChart data={dateSeriesData} x="date" y="value" points {renderContext} />
   </div>
 </Preview>
 
@@ -180,7 +194,14 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" points labels={{ offset: 10 }} />
+    <LineChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      points
+      labels={{ offset: 10 }}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -199,6 +220,7 @@
           points: false,
         },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -237,6 +259,7 @@
         },
       }}
       tooltip={{ mode: 'voronoi' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -273,6 +296,7 @@
         },
       }}
       tooltip={{ mode: 'voronoi' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -314,6 +338,7 @@
         },
       }}
       tooltip={{ mode: 'voronoi' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -322,14 +347,14 @@
 
 <Preview data={data.dailyTemperature}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null}>
+    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null} {renderContext}>
       <svelte:fragment slot="marks">
         <LinearGradient
           stops={ticks(1, 0, 10).map(temperatureColor.interpolator())}
           vertical
-          let:url
+          let:gradient
         >
-          <Spline class="stroke-2" stroke={url} />
+          <Spline class="stroke-2" stroke={gradient} />
         </LinearGradient>
       </svelte:fragment>
 
@@ -356,9 +381,9 @@
 
 <Preview data={data.dailyTemperature}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null}>
+    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null} {renderContext}>
       <svelte:fragment slot="marks" let:yScale let:height let:padding>
-        {@const thresholdOffset = (yScale(50) / (height + padding.bottom)) * 100 + '%'}
+        {@const thresholdOffset = yScale(50) / (height + padding.bottom)}
         <LinearGradient
           stops={[
             [thresholdOffset, 'hsl(var(--color-danger))'],
@@ -366,9 +391,9 @@
           ]}
           units="userSpaceOnUse"
           vertical
-          let:url
+          let:gradient
         >
-          <Spline class="stroke-2" stroke={url} />
+          <Spline class="stroke-2" stroke={gradient} />
         </LinearGradient>
       </svelte:fragment>
     </LineChart>
@@ -403,6 +428,7 @@
         };
       })}
       tooltip={{ mode: 'manual' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -440,6 +466,7 @@
         };
       })}
       tooltip={{ mode: 'manual' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -463,6 +490,7 @@
       yBaseline={undefined}
       tooltip={{ mode: 'manual' }}
       props={{ yAxis: { tweened: true }, grid: { tweened: true } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -471,7 +499,7 @@
 
 <Preview data={dateSeriesDataWithNulls}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesDataWithNulls} x="date" y="value" points />
+    <LineChart data={dateSeriesDataWithNulls} x="date" y="value" points {renderContext} />
   </div>
 </Preview>
 
@@ -479,7 +507,7 @@
 
 <Preview data={dateSeriesDataWithNulls}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesDataWithNulls} x="date" y="value">
+    <LineChart data={dateSeriesDataWithNulls} x="date" y="value" {renderContext}>
       <svelte:fragment slot="belowMarks" let:series>
         {#each series as s}
           <Spline
@@ -505,6 +533,7 @@
       axis={false}
       grid={false}
       props={{ highlight: { points: { r: 3, class: 'stroke-2 stroke-surface-100' } } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -513,7 +542,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" axis="x" />
+    <LineChart data={dateSeriesData} x="date" y="value" axis="x" {renderContext} />
   </div>
 </Preview>
 
@@ -521,7 +550,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" axis="y" />
+    <LineChart data={dateSeriesData} x="date" y="value" axis="y" {renderContext} />
   </div>
 </Preview>
 
@@ -538,6 +567,7 @@
         { key: 'oranges', color: 'hsl(var(--color-warning))' },
       ]}
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -546,7 +576,7 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value">
+    <LineChart data={dateSeriesData} x="date" y="value" {renderContext}>
       <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
         <Tooltip.Root
           x={padding.left}
@@ -578,8 +608,8 @@
 
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded">
-    <LineChart data={dateSeriesData} x="date" y="value" let:x let:y>
-      <Svg>
+    <LineChart data={dateSeriesData} x="date" y="value" let:x let:y {renderContext}>
+      <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
@@ -588,7 +618,7 @@
         />
         <Spline class="stroke-2 stroke-primary" />
         <Highlight points lines />
-      </Svg>
+      </svelte:component>
 
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(x(data), PeriodType.DayTime)}</Tooltip.Header>
diff --git a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
index 8fad7ff66..8db5482ca 100644
--- a/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/LinearGradient/+page.svelte
@@ -66,15 +66,15 @@
   <div class="h-[334px] p-4 border rounded">
     <Chart>
       <Svg>
-        <LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:url>
+        <LinearGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:gradient>
           {#each { length: 6 } as _, i}
-            <rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={url} />
+            <rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={gradient} />
           {/each}
         </LinearGradient>
 
-        <LinearGradient class="from-green-500 to-blue-500" units="userSpaceOnUse" let:url>
+        <LinearGradient class="from-green-500 to-blue-500" units="userSpaceOnUse" let:gradient>
           {#each { length: 6 } as _, i}
-            <rect x={0 + i * 120} y={160} width={100} height={140} rx={8} fill={url} />
+            <rect x={0 + i * 120} y={160} width={100} height={140} rx={8} fill={gradient} />
           {/each}
         </LinearGradient>
       </Svg>
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
index dc45b80af..bf42bbbbc 100644
--- a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -6,6 +6,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { longData } from '$lib/utils/genData.js';
+  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   const dataByYear = group(longData, (d) => d.year);
   const data = dataByYear.get(2019) ?? [];
@@ -27,15 +28,24 @@
     { key: 'exercise', value: 20, maxValue: 30, color: '#a3e635' },
     { key: 'stand', value: 10, maxValue: 12, color: '#22d3ee' },
   ];
+
+  let renderContext: 'svg' | 'canvas' = 'svg';
 </script>
 
 <h1>Examples</h1>
 
+<Field label="Render context">
+  <ToggleGroup bind:value={renderContext} variant="outline">
+    <ToggleOption value="svg">Svg</ToggleOption>
+    <ToggleOption value="canvas">Canvas</ToggleOption>
+  </ToggleGroup>
+</Field>
+
 <h2>Basic</h2>
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" />
+    <PieChart {data} key="fruit" value="value" {renderContext} />
   </div>
 </Preview>
 
@@ -43,7 +53,7 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" outerRadius={100} />
+    <PieChart {data} key="fruit" value="value" outerRadius={100} {renderContext} />
   </div>
 </Preview>
 
@@ -51,7 +61,7 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" outerRadius={-20} />
+    <PieChart {data} key="fruit" value="value" outerRadius={-20} {renderContext} />
   </div>
 </Preview>
 
@@ -59,7 +69,15 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" innerRadius={-20} cornerRadius={5} padAngle={0.02} />
+    <PieChart
+      {data}
+      key="fruit"
+      value="value"
+      innerRadius={-20}
+      cornerRadius={5}
+      padAngle={0.02}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -77,6 +95,7 @@
       cornerRadius={10}
       padAngle={0.02}
       props={{ group: { y: 80 } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -93,6 +112,7 @@
       outerRadius={-25}
       innerRadius={-20}
       cornerRadius={10}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -101,9 +121,9 @@
 
 <Preview {data}>
   <div class="h-[160px] p-4 border rounded">
-    <PieChart>
+    <PieChart {renderContext}>
       <svelte:fragment slot="marks">
-        <LinearGradient class="from-secondary to-primary" let:url>
+        <LinearGradient class="from-secondary to-primary" let:gradient>
           <Group y={20}>
             <Arc
               value={70}
@@ -113,7 +133,7 @@
               cornerRadius={10}
               padAngle={0.02}
               range={[-120, 120]}
-              fill={url}
+              fill={gradient}
               track={{ class: 'fill-none stroke-surface-content/10' }}
               let:value
             >
@@ -148,6 +168,7 @@
       props={{
         group: { y: 45 },
       }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -164,6 +185,7 @@
       innerRadius={-20}
       cornerRadius={5}
       padAngle={0.01}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -179,6 +201,7 @@
       outerRadius={-25}
       innerRadius={-20}
       cornerRadius={10}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -196,6 +219,7 @@
       innerRadius={-20}
       cornerRadius={10}
       props={{ group: { y: 70 } }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -216,6 +240,7 @@
       outerRadius={-25}
       innerRadius={-20}
       cornerRadius={10}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -238,6 +263,7 @@
       outerRadius={-25}
       innerRadius={-20}
       cornerRadius={10}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -253,6 +279,7 @@
         { key: 2019, data: dataByYear.get(2019), props: { innerRadius: -20 } },
         { key: 2018, data: dataByYear.get(2018), props: { outerRadius: -30 } },
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -261,7 +288,13 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" props={{ arc: { class: 'stroke-surface-100' } }} />
+    <PieChart
+      {data}
+      key="fruit"
+      value="value"
+      props={{ arc: { class: 'stroke-surface-100' } }}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -269,7 +302,7 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" legend />
+    <PieChart {data} key="fruit" value="value" legend {renderContext} />
   </div>
 </Preview>
 
@@ -282,6 +315,7 @@
       key="fruit"
       value="value"
       legend={{ placement: 'top-left', orientation: 'vertical' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -307,6 +341,7 @@
       }}
       value="value"
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -325,6 +360,7 @@
         'hsl(var(--color-danger))',
         'hsl(var(--color-info))',
       ]}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -333,7 +369,7 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" cRange={schemeTableau10} />
+    <PieChart {data} key="fruit" value="value" cRange={schemeTableau10} {renderContext} />
   </div>
 </Preview>
 
@@ -341,7 +377,13 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" cRange={quantize(interpolateRainbow, 5)} />
+    <PieChart
+      {data}
+      key="fruit"
+      value="value"
+      cRange={quantize(interpolateRainbow, 5)}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -355,6 +397,7 @@
       value="value"
       c="color"
       cRange={dataWithColor.map((d) => d.color)}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -369,6 +412,7 @@
       value="value"
       padding={{ right: 80 }}
       legend={{ placement: 'right', orientation: 'vertical' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -383,6 +427,7 @@
       value="value"
       placement="left"
       legend={{ placement: 'right', orientation: 'vertical' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -397,6 +442,7 @@
       value="value"
       placement="right"
       legend={{ placement: 'left', orientation: 'vertical' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -412,6 +458,7 @@
       center={false}
       props={{ group: { x: 200, center: 'y' } }}
       legend={{ placement: 'right', orientation: 'vertical' }}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -420,6 +467,6 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <PieChart {data} key="fruit" value="value" keys="centroid" />
+    <PieChart {data} key="fruit" value="value" keys="centroid" {renderContext} />
   </div>
 </Preview> -->
diff --git a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
index 6544dfca3..23ab5919d 100644
--- a/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/RadialGradient/+page.svelte
@@ -13,16 +13,21 @@
   <div class="h-[334px] p-4 border rounded">
     <Chart>
       <Svg>
-        <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} let:url>
-          <circle cx={radius + 0 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']} let:gradient>
+          <circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
 
-        <RadialGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} fx="20%" fy="20%" let:url>
-          <circle cx={radius + 1 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient
+          stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']}
+          fx="20%"
+          fy="20%"
+          let:gradient
+        >
+          <circle cx={radius + 1 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
 
-        <RadialGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} r="30%" let:url>
-          <circle cx={radius + 2 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} r="30%" let:gradient>
+          <circle cx={radius + 2 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
       </Svg>
     </Chart>
@@ -58,16 +63,26 @@
   <div class="h-[252px] p-4 border rounded">
     <Chart>
       <Svg>
-        <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="pad" let:url>
-          <circle cx={radius + 0 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="pad" let:gradient>
+          <circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
 
-        <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="reflect" let:url>
-          <circle cx={radius + 1 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient
+          class="from-green-500 to-blue-500"
+          r="30%"
+          spreadMethod="reflect"
+          let:gradient
+        >
+          <circle cx={radius + 1 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
 
-        <RadialGradient class="from-green-500 to-blue-500" r="30%" spreadMethod="repeat" let:url>
-          <circle cx={radius + 2 * 120} cy={radius} r={radius} fill={url} />
+        <RadialGradient
+          class="from-green-500 to-blue-500"
+          r="30%"
+          spreadMethod="repeat"
+          let:gradient
+        >
+          <circle cx={radius + 2 * 120} cy={radius} r={radius} fill={gradient} />
         </RadialGradient>
       </Svg>
     </Chart>
@@ -80,15 +95,15 @@
   <div class="h-[252px] p-4 border rounded">
     <Chart>
       <Svg>
-        <RadialGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:url>
+        <RadialGradient class="from-green-500 to-blue-500" units="objectBoundingBox" let:gradient>
           {#each { length: 6 } as _, i}
-            <circle cx={radius + i * 120} cy={radius} r={radius} fill={url} />
+            <circle cx={radius + i * 120} cy={radius} r={radius} fill={gradient} />
           {/each}
         </RadialGradient>
 
-        <RadialGradient class="from-green-500 to-blue-500" units="userSpaceOnUse" let:url>
+        <RadialGradient class="from-green-500 to-blue-500" units="userSpaceOnUse" let:gradient>
           {#each { length: 6 } as _, i}
-            <circle cx={radius + i * 120} cy={120 + radius} r={radius} fill={url} />
+            <circle cx={radius + i * 120} cy={120 + radius} r={radius} fill={gradient} />
           {/each}
         </RadialGradient>
       </Svg>
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
index efcbd1576..0190dca0c 100644
--- a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Axis, Highlight, Legend, Points, ScatterChart, Svg, Tooltip } from 'layerchart';
+  import { Axis, Canvas, Highlight, Legend, Points, ScatterChart, Svg, Tooltip } from 'layerchart';
   import { selectionStore } from '@layerstack/svelte-stores';
   import { cls } from '@layerstack/tailwind';
   import { format } from '@layerstack/utils';
@@ -9,6 +9,7 @@
 
   import Preview from '$lib/docs/Preview.svelte';
   import { getSpiral } from '$lib/utils/genData.js';
+  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   export let data;
 
@@ -35,15 +36,24 @@
   });
 
   const selection = selectionStore({ initial: pengiunSeries.map((s) => s.key) });
+
+  let renderContext: 'svg' | 'canvas' = 'svg';
 </script>
 
 <h1>Examples</h1>
 
+<Field label="Render context">
+  <ToggleGroup bind:value={renderContext} variant="outline">
+    <ToggleOption value="svg">Svg</ToggleOption>
+    <ToggleOption value="canvas">Canvas</ToggleOption>
+  </ToggleGroup>
+</Field>
+
 <h2>Basic</h2>
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" />
+    <ScatterChart data={spiralData} x="x" y="y" {renderContext} />
   </div>
 </Preview>
 
@@ -51,7 +61,14 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" xPadding={[20, 20]} yPadding={[20, 20]} />
+    <ScatterChart
+      data={spiralData}
+      x="x"
+      y="y"
+      xPadding={[20, 20]}
+      yPadding={[20, 20]}
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -59,7 +76,16 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" r="y" rRange={[2, 30]} xNice yNice />
+    <ScatterChart
+      data={spiralData}
+      x="x"
+      y="y"
+      r="y"
+      rRange={[2, 30]}
+      xNice
+      yNice
+      {renderContext}
+    />
   </div>
 </Preview>
 
@@ -67,7 +93,7 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" xBaseline={0} yBaseline={0} />
+    <ScatterChart data={spiralData} x="x" y="y" xBaseline={0} yBaseline={0} {renderContext} />
   </div>
 </Preview>
 
@@ -89,6 +115,7 @@
           ][i],
         };
       })}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -113,6 +140,7 @@
           ][i],
         };
       })}
+      {renderContext}
     />
   </div>
 </Preview>
@@ -121,7 +149,7 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" labels={{ offset: 10 }} />
+    <ScatterChart data={spiralData} x="x" y="y" labels={{ offset: 10 }} {renderContext} />
   </div>
 </Preview>
 
@@ -144,6 +172,7 @@
         };
       })}
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -168,6 +197,7 @@
         };
       })}
       legend
+      {renderContext}
     />
   </div>
 </Preview>
@@ -187,6 +217,7 @@
         grid: { tweened: { duration: 200 } },
         points: { tweened: { duration: 200 } },
       }}
+      {renderContext}
     >
       <svelte:fragment slot="legend">
         <Legend
@@ -221,7 +252,7 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" axis="x" />
+    <ScatterChart data={spiralData} x="x" y="y" axis="x" {renderContext} />
   </div>
 </Preview>
 
@@ -229,7 +260,7 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" axis="y" />
+    <ScatterChart data={spiralData} x="x" y="y" axis="y" {renderContext} />
   </div>
 </Preview>
 
@@ -244,6 +275,7 @@
       axis={false}
       grid={false}
       props={{ highlight: { lines: false } }}
+      {renderContext}
     >
       <svelte:fragment slot="tooltip" let:data let:x>
         <Tooltip.Root let:data>
@@ -258,7 +290,7 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y">
+    <ScatterChart data={spiralData} x="x" y="y" {renderContext}>
       <svelte:fragment slot="tooltip" let:x let:y let:padding let:height>
         <Tooltip.Root
           x={padding.left}
@@ -290,13 +322,13 @@
 
 <Preview data={spiralData}>
   <div class="h-[400px] p-4 border rounded">
-    <ScatterChart data={spiralData} x="x" y="y" let:x let:y>
-      <Svg>
+    <ScatterChart data={spiralData} x="x" y="y" let:x let:y {renderContext}>
+      <svelte:component this={renderContext === 'canvas' ? Canvas : Svg}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" grid rule />
         <Points class="fill-primary/10 stroke-primary" />
         <Highlight points lines axis="both" />
-      </Svg>
+      </svelte:component>
 
       <Tooltip.Root let:data>
         <Tooltip.Header>{format(x(data), 'integer')}</Tooltip.Header>
diff --git a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
index b0e1efdcb..41ed18c5e 100644
--- a/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Spline/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { ComponentProps } from 'svelte';
+  import type { Component, ComponentProps } from 'svelte';
 
-  import { Axis, Chart, Points, Spline, Svg, Text } from 'layerchart';
+  import { Axis, Canvas, Chart, Points, Spline, Svg, Text } from 'layerchart';
   import { Field, RangeField, Switch, Toggle, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -13,6 +13,7 @@
   let showPoints = false;
   let show = true;
   let motion: 'draw' | 'tweened' | 'none' = 'tweened';
+  let Context: Component = Svg;
 
   let pathGenerator = (x: number) => x;
   let curve: ComponentProps<CurveMenuField>['value'] = undefined;
@@ -41,10 +42,18 @@
     </Field>
   </div>
 
-  <div class="grid grid-cols-[100px,auto,1fr] gap-2">
+  <div class="grid grid-cols-[100px,auto,auto,1fr] gap-2">
     <Field label="Show" let:id>
       <Switch bind:checked={show} {id} size="md" />
     </Field>
+
+    <Field label="Context" classes={{ input: 'mt-1 mb-[6px]' }}>
+      <ToggleGroup bind:value={Context} variant="outline" size="sm">
+        <ToggleOption value={Svg}>Svg</ToggleOption>
+        <ToggleOption value={Canvas}>Canvas</ToggleOption>
+      </ToggleGroup>
+    </Field>
+
     <Field label="Motion" classes={{ input: 'mt-1 mb-[6px]' }}>
       <ToggleGroup bind:value={motion} variant="outline" size="sm">
         <ToggleOption value="tweened">tweened</ToggleOption>
@@ -57,10 +66,11 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
-      <Svg>
+    <Chart {data} x="x" y="y" yNice padding={{ left: 24, bottom: 24, top: 4, right: 8 }}>
+      <svelte:component this={Context}>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
+
         {#if show}
           <Spline
             {curve}
@@ -68,11 +78,12 @@
             draw={motion === 'draw'}
             class="stroke-primary stroke-2"
           />
+
           {#if showPoints}
             <Points tweened={motion === 'tweened'} r={3} class="fill-surface-100 stroke-primary" />
           {/if}
         {/if}
-      </Svg>
+      </svelte:component>
     </Chart>
   </div>
 </Preview>
@@ -261,6 +272,35 @@
   </Preview>
 </Toggle>
 
+<h2>Canvas</h2>
+
+<Toggle on let:on={show} let:toggle>
+  <div class="grid grid-cols-[auto,1fr,1fr,1fr] gap-2 mb-2">
+    <Field label="Show" let:id>
+      <Switch checked={show} on:change={toggle} {id} size="md" />
+    </Field>
+    <PathDataMenuField bind:value={pathGenerator} {amplitude} {frequency} {phase} />
+    <CurveMenuField bind:value={curve} />
+    <RangeField label="Points" bind:value={pointCount} min={2} max={1000} />
+  </div>
+
+  <Preview {data}>
+    <div class="h-[300px] p-4 border rounded">
+      <Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }}>
+        <Svg>
+          <Axis placement="left" grid rule />
+          <Axis placement="bottom" rule />
+        </Svg>
+        <Canvas>
+          {#if show}
+            <Spline {curve} tweened class="stroke-primary stroke-2" />
+          {/if}
+        </Canvas>
+      </Chart>
+    </div>
+  </Preview>
+</Toggle>
+
 <Blockquote>
   Because the draw transition and tweened store use different timers, there is no guarantee they
   will start at the same time
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index 7a1c75a78..38c2305a1 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -636,7 +636,7 @@
             data={seriesData}
             line={{ stroke: color, 'stroke-width': 2 }}
             fill={color}
-            fill-opacity={0.2}
+            fillOpacity={0.2}
           />
         {/each}
 
diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
index 24cae4e9a..8ab98f938 100644
--- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
@@ -14,6 +14,7 @@
     Tooltip,
     TransformContext,
     Svg,
+    renderPathData,
   } from 'layerchart';
   import { Button, ButtonGroup } from 'svelte-ux';
   import { sortFunc } from '@layerstack/utils';
@@ -224,25 +225,17 @@
     >
       <Canvas>
         <GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
-      </Canvas>
-
-      <Canvas>
         <Graticule class="stroke-surface-content/20" />
-      </Canvas>
-
-      <Canvas>
         <GeoPath geojson={countries} class="stroke-surface-content/50 fill-white" />
-      </Canvas>
-
-      <Canvas>
         <GeoPath geojson={selectedFeature} class="stroke-primary-900 fill-primary" />
       </Canvas>
 
-      {#if tooltip.data}
-        <Canvas>
+      <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
+      <Canvas>
+        {#if tooltip.data}
           <GeoPath geojson={tooltip.data} class="fill-surface-content/20" />
-        </Canvas>
-      {/if}
+        {/if}
+      </Canvas>
 
       <HitCanvas
         let:nextColor
@@ -254,18 +247,13 @@
         }}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of countries.features) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
-
+              const geoPath = newGeoPath();
               // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
-              ctx.strokeStyle = color;
-              ctx.stroke();
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
index 56e137449..295adcb5e 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -59,7 +59,7 @@
     <Chart>
       <Svg center>
         <Group y={16}>
-          <LinearGradient class="from-secondary to-primary" let:url>
+          <LinearGradient class="from-secondary to-primary" let:gradient>
             <Arc
               {value}
               range={[-120, 120]}
@@ -68,7 +68,7 @@
               cornerRadius={5}
               spring
               let:value
-              fill={url}
+              fill={gradient}
               track={{ class: 'fill-none stroke-surface-content/10' }}
             >
               <Text
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 863d0949a..be4ed4fae 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -204,8 +204,8 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
         </LinearGradient>
       </Svg>
     </Chart>
@@ -232,9 +232,9 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-secondary/0 to-secondary" let:url={strokeUrl}>
-          <LinearGradient class="from-primary/50 to-primary/0" vertical let:url={fillUrl}>
-            <Area line={{ stroke: strokeUrl, class: 'stroke-2' }} fill={fillUrl} />
+        <LinearGradient class="from-secondary/0 to-secondary" let:gradient={strokeGradient}>
+          <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient={fillGradient}>
+            <Area line={{ stroke: strokeGradient, class: 'stroke-2' }} fill={fillGradient} />
           </LinearGradient>
         </LinearGradient>
       </Svg>
@@ -270,12 +270,7 @@
         />
         {#each dataByFruit as [fruit, data]}
           {@const color = cScale?.(fruit)}
-          <Area
-            {data}
-            fill={color}
-            fill-opacity={0.3}
-            line={{ class: 'stroke-2', stroke: color }}
-          />
+          <Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />
           <Point d={data[data.length - 1]} let:x let:y>
             <circle cx={x} cy={y} r={4} fill={color} />
             <Text
@@ -327,7 +322,7 @@
           y1={(d) => d.apples}
           class="stroke-2"
           fill={fruitColors.apples}
-          fill-opacity={0.3}
+          fillOpacity={0.3}
           line={{ stroke: fruitColors.apples, class: 'stroke-2' }}
         />
 
@@ -335,7 +330,7 @@
           y1={(d) => d.bananas}
           class="stroke-2"
           fill={fruitColors.bananas}
-          fill-opacity={0.3}
+          fillOpacity={0.3}
           line={{ stroke: fruitColors.bananas, class: 'stroke-2' }}
         />
 
@@ -343,7 +338,7 @@
           y1={(d) => d.oranges}
           class="stroke-2"
           fill={fruitColors.oranges}
-          fill-opacity={0.3}
+          fillOpacity={0.3}
           line={{ stroke: fruitColors.oranges, class: 'stroke-2' }}
         />
 
@@ -396,12 +391,7 @@
             tooltip.data == null || tooltip.data.fruit === fruit
               ? cScale?.(fruit)
               : 'hsl(var(--color-surface-content) / 20%)'}
-          <Area
-            {data}
-            fill={color}
-            fill-opacity={0.3}
-            line={{ class: 'stroke-2', stroke: color }}
-          />
+          <Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />
           <Point d={data[data.length - 1]} let:x let:y>
             <circle cx={x} cy={y} r={4} fill={color} />
             <Text
@@ -456,12 +446,7 @@
         />
         {#each dataByFruit as [fruit, data]}
           {@const color = cScale?.(fruit)}
-          <Area
-            {data}
-            fill={color}
-            fill-opacity={0.3}
-            line={{ class: 'stroke-2', stroke: color }}
-          />
+          <Area {data} fill={color} fillOpacity={0.3} line={{ class: 'stroke-2', stroke: color }} />
         {/each}
         <Labels format="integer" />
         <Highlight points lines />
@@ -511,7 +496,7 @@
             data={seriesData}
             line={{ stroke: color, 'stroke-width': 2 }}
             fill={color}
-            fill-opacity={0.2}
+            fillOpacity={0.2}
           />
         {/each}
 
@@ -565,8 +550,13 @@
           {@const primaryColor = primaryColors[index]}
           {@const secondaryColor = secondaryColors[index]}
 
-          <LinearGradient stops={[primaryColor, secondaryColor]} vertical let:url>
-            <Area data={seriesData} fill={url} fill-opacity={0.5} line={{ stroke: primaryColor }} />
+          <LinearGradient stops={[primaryColor, secondaryColor]} vertical let:gradient>
+            <Area
+              data={seriesData}
+              fill={gradient}
+              fillOpacity={0.5}
+              line={{ stroke: primaryColor }}
+            />
           </LinearGradient>
         {/each}
       </Svg>
@@ -880,9 +870,9 @@
           ]}
           units="userSpaceOnUse"
           vertical
-          let:url
+          let:gradient
         >
-          <Area line={{ stroke: url, class: 'stroke-2' }} fill={url} fill-opacity={0.2} />
+          <Area line={{ stroke: gradient, class: 'stroke-2' }} fill={gradient} fillOpacity={0.2} />
         </LinearGradient>
       </Svg>
     </Chart>
@@ -918,13 +908,13 @@
           ]}
           units="userSpaceOnUse"
           vertical
-          let:url
+          let:gradient
         >
           <Area
             y0={(d) => 0}
-            line={{ stroke: url, class: 'stroke-2' }}
-            fill={url}
-            fill-opacity={0.2}
+            line={{ stroke: gradient, class: 'stroke-2' }}
+            fill={gradient}
+            fillOpacity={0.2}
           />
         </LinearGradient>
       </Svg>
@@ -951,10 +941,10 @@
       let:tooltip
     >
       <Svg>
-        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
-          <Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={url} />
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:gradient>
+          <Area line={{ class: 'stroke-2 stroke-primary opacity-20' }} fill={gradient} />
           <RectClipPath x={0} y={0} width={tooltip.data ? tooltip.x : width} {height} spring>
-            <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+            <Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />
           </RectClipPath>
         </LinearGradient>
         <Highlight points lines={{ class: 'stroke-primary [stroke-dasharray:unset]' }} />
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index dce082f5d..17f6ae965 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -451,8 +451,8 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-green-400 to-blue-500" units="userSpaceOnUse" let:url>
-          <Bars strokeWidth={1} fill={url} class="stroke-blue-900" />
+        <LinearGradient class="from-green-400 to-blue-500" units="userSpaceOnUse" let:gradient>
+          <Bars strokeWidth={1} fill={gradient} class="stroke-blue-900" />
         </LinearGradient>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
index b852b6185..c1e83aa0c 100644
--- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
@@ -7,7 +7,17 @@
   import { feature } from 'topojson-client';
   import { sortFunc } from '@layerstack/utils';
 
-  import { Chart, Canvas, GeoPath, HitCanvas, Legend, Svg, Tooltip } from 'layerchart';
+  import {
+    Chart,
+    Canvas,
+    GeoPath,
+    HitCanvas,
+    Legend,
+    Svg,
+    Tooltip,
+    renderPathData,
+    circlePath,
+  } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -176,23 +186,25 @@
           class="fill-surface-content/10 stroke-surface-100"
           {strokeWidth}
         />
-      </Canvas>
 
-      <Canvas>
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
-              const [x, y] = geoPath.centroid(feature);
+              const geoPath = newGeoPath();
+
+              const [cx, cy] = geoPath.centroid(feature);
               const d = feature.properties.data;
-              const radius = rScale(d?.population ?? 0);
+              const r = rScale(d?.population ?? 0);
               const color = colorScale(d?.percentUnder18 ?? 0);
-              ctx.strokeStyle = color;
-              ctx.lineWidth = strokeWidth;
-              ctx.fillStyle = color + (256 * 0.5).toString(16);
-              ctx.beginPath();
-              ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-              ctx.fill();
-              ctx.stroke();
+
+              const pathData = circlePath({ cx, cy, r });
+              renderPathData(ctx, pathData, {
+                styles: {
+                  fill: color + (256 * 0.5).toString(16),
+                  stroke: color,
+                  strokeWidth,
+                },
+              });
             }
           }}
         />
@@ -215,14 +227,13 @@
         on:pointerleave={tooltip.hide}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
index 8742cb740..034037da8 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
@@ -6,7 +6,16 @@
   import { feature } from 'topojson-client';
   import { format } from '@layerstack/utils';
 
-  import { Canvas, Chart, GeoPath, HitCanvas, Legend, Svg, Tooltip } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    HitCanvas,
+    Legend,
+    renderPathData,
+    Svg,
+    Tooltip,
+  } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -150,17 +159,15 @@
 
       <Canvas>
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = colorScale(feature.properties.data?.population ?? 0);
-              ctx.fill();
+              const geoPath = newGeoPath();
+              renderPathData(ctx, geoPath(feature), {
+                styles: { fill: colorScale(feature.properties.data?.population ?? 0) },
+              });
             }
           }}
         />
-      </Canvas>
-      <Canvas>
         <GeoPath geojson={states} class="stroke-black/30" {strokeWidth} />
       </Canvas>
 
@@ -177,14 +184,13 @@
         on:pointerleave={tooltip.hide}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index b41fcec36..3e9234c6b 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -452,8 +452,13 @@
           format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <LinearGradient class="from-blue-500 to-green-400" vertical units="userSpaceOnUse" let:url>
-          <Bars strokeWidth={1} fill={url} class="stroke-blue-900" />
+        <LinearGradient
+          class="from-blue-500 to-green-400"
+          vertical
+          units="userSpaceOnUse"
+          let:gradient
+        >
+          <Bars strokeWidth={1} fill={gradient} class="stroke-blue-900" />
         </LinearGradient>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
index 5fffe776b..6e646cdeb 100644
--- a/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/CountryMap/+page.svelte
@@ -2,7 +2,7 @@
   import { geoAlbersUsa } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Svg, Text } from 'layerchart';
+  import { Canvas, Chart, GeoPath, renderText, Svg, Text } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -62,28 +62,26 @@
     >
       <Canvas>
         <GeoPath geojson={states} class="fill-surface-content/10 stroke-surface-100" />
-      </Canvas>
-      {#each states.features as feature}
-        <Canvas>
+
+        {#each states.features as feature}
           <GeoPath
             geojson={feature}
-            class="fill-surface-content stroke-surface-100"
-            render={(ctx, { geoPath }) => {
+            render={(ctx, { newGeoPath }) => {
+              const geoPath = newGeoPath();
               const [x, y] = geoPath.centroid(feature);
-              const computedStyle = window.getComputedStyle(ctx.canvas);
-              ctx.font = '8px sans-serif';
-              ctx.textAlign = 'center';
-
-              ctx.lineWidth = 2;
-              ctx.strokeStyle = computedStyle.stroke;
-              ctx.strokeText(feature.properties.name, x, y);
-
-              ctx.fillStyle = computedStyle.fill;
-              ctx.fillText(feature.properties.name, x, y);
+              renderText(
+                ctx,
+                feature.properties.name,
+                { x, y },
+                {
+                  classes: 'text-[8px] text-center fill-surface-content stroke-surface-100',
+                  styles: { paintOrder: 'stroke' },
+                }
+              );
             }}
           />
-        </Canvas>
-      {/each}
+        {/each}
+      </Canvas>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
index 210db93d7..50b13a8bf 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
@@ -2,7 +2,7 @@
   import { geoAlbersUsa } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, HitCanvas, Svg, Tooltip } from 'layerchart';
+  import { Canvas, Chart, GeoPath, HitCanvas, Svg, Tooltip, renderPathData } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -65,16 +65,15 @@
     >
       <Canvas>
         <GeoPath geojson={states} class="stroke-surface-content" />
-      </Canvas>
-      <Canvas>
         <GeoPath geojson={counties} class="stroke-surface-content/20" />
       </Canvas>
 
-      {#if tooltip.data}
-        <Canvas>
+      <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
+      <Canvas>
+        {#if tooltip.data}
           <GeoPath geojson={tooltip.data} class="stroke-surface-content fill-surface-content/20" />
-        </Canvas>
-      {/if}
+        {/if}
+      </Canvas>
 
       <HitCanvas
         let:nextColor
@@ -83,15 +82,12 @@
         on:pointerleave={tooltip.hide}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of states.features) {
               const color = nextColor();
-
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
-
+              const geoPath = newGeoPath();
+              // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
               setColorData(color, feature);
             }
           }}
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
index 460978a99..58bb950cb 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
@@ -3,7 +3,18 @@
   import { feature } from 'topojson-client';
   import { Field, Switch } from 'svelte-ux';
 
-  import { Canvas, Chart, GeoPath, GeoPoint, Svg, Text, Tooltip } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    circlePath,
+    GeoPath,
+    GeoPoint,
+    renderPathData,
+    renderText,
+    Svg,
+    Text,
+    Tooltip,
+  } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -257,48 +268,36 @@
     >
       <Canvas>
         <GeoPath geojson={states} class="fill-surface-content/10 stroke-surface-100" />
-      </Canvas>
 
-      {#each data.us.captitals as capital}
-        <Canvas>
+        {#each data.us.captitals as capital}
           <!-- Point -->
           <GeoPoint
             lat={capital.latitude}
             long={capital.longitude}
-            class="fill-white stroke-danger"
             render={(ctx, { x, y }) => {
-              const computedStyle = window.getComputedStyle(ctx.canvas);
-              const radius = 2;
-              ctx.strokeStyle = computedStyle.stroke;
-              ctx.fillStyle = computedStyle.fill;
-              ctx.beginPath();
-              ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
-              ctx.fill();
-              ctx.stroke();
+              const pathData = circlePath({ cx: x, cy: y, r: 2 });
+              renderPathData(ctx, pathData, { classes: 'fill-white stroke-danger' });
             }}
           />
-        </Canvas>
 
-        <!-- Use separate canvas/points for separate stroke/fill classes -->
-        <Canvas>
           <!-- Label -->
           <GeoPoint
             lat={capital.latitude}
             long={capital.longitude}
-            class="fill-surface-content stroke-surface-100"
             render={(ctx, { x, y }) => {
-              const computedStyle = window.getComputedStyle(ctx.canvas);
-              ctx.font = '8px sans-serif';
-              ctx.textAlign = 'center';
-              ctx.lineWidth = 2;
-              ctx.strokeStyle = computedStyle.stroke;
-              ctx.fillStyle = computedStyle.fill;
-              ctx.strokeText(capital.description, x, y - 6);
-              ctx.fillText(capital.description, x, y - 6);
+              renderText(
+                ctx,
+                capital.description,
+                { x, y: y - 6 },
+                {
+                  classes: 'text-[8px] text-center fill-surface-content stroke-surface-100',
+                  styles: { paintOrder: 'stroke' },
+                }
+              );
             }}
           />
-        </Canvas>
-      {/each}
+        {/each}
+      </Canvas>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index 4610d7c52..d5a3187a6 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -7,6 +7,7 @@
 
   import {
     Axis,
+    Canvas,
     Chart,
     Highlight,
     Labels,
@@ -84,6 +85,34 @@
   </div>
 </Preview>
 
+<h2>Canvas</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+      </Svg>
+      <Canvas>
+        <Spline class="stroke-2 stroke-primary" />
+      </Canvas>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>With Tooltip and Highlight</h2>
 
 <Preview data={dateSeriesData}>
@@ -168,9 +197,9 @@
         <LinearGradient
           stops={ticks(1, 0, 10).map(temperatureColor.interpolator())}
           vertical
-          let:url
+          let:gradient
         >
-          <Spline class="stroke-2" stroke={url} />
+          <Spline class="stroke-2" stroke={gradient} />
         </LinearGradient>
       </Svg>
       <Legend
@@ -214,9 +243,9 @@
           ]}
           units="userSpaceOnUse"
           vertical
-          let:url
+          let:gradient
         >
-          <Spline class="stroke-2" stroke={url} />
+          <Spline class="stroke-2" stroke={gradient} />
         </LinearGradient>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
index 6ed4039be..9945fca1f 100644
--- a/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Oscilloscope/+page.svelte
@@ -107,9 +107,9 @@
           stops={ticks(1, 0, 10).map(colorScale.interpolator())}
           vertical
           units="userSpaceOnUse"
-          let:url
+          let:gradient
         >
-          <Bars radius={1} fill={url} />
+          <Bars radius={1} fill={gradient} />
         </LinearGradient>
       </svelte:fragment>
     </BarChart>
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index a686b0e2b..d416082d2 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -114,7 +114,9 @@
               {@const nodeColor = getNodeColor(node, colorBy)}
               <Circle
                 r={node.r}
-                stroke={hsl(nodeColor).darker(colorBy === 'children' ? 0.5 : 1)}
+                stroke={hsl(nodeColor)
+                  .darker(colorBy === 'children' ? 0.5 : 1)
+                  .toString()}
                 stroke-width={1 / transform.scale}
                 fill={nodeColor}
               />
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
index 84b68314e..2bd4ca8dc 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
@@ -180,7 +180,7 @@
                         height={nodeHeight}
                         stroke={colorBy === 'children'
                           ? 'hsl(var(--color-primary-content))'
-                          : hsl(nodeColor).darker(1)}
+                          : hsl(nodeColor).darker(1).toString()}
                         stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                         fill={nodeColor}
                         rx={5}
@@ -262,7 +262,7 @@
                         height={nodeHeight}
                         stroke={colorBy === 'children'
                           ? 'hsl(var(--color-primary-content))'
-                          : hsl(nodeColor).darker(1)}
+                          : hsl(nodeColor).darker(1).toString()}
                         stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                         fill={nodeColor}
                         rx={5}
@@ -353,7 +353,7 @@
                       height={nodeHeight}
                       stroke={colorBy === 'children'
                         ? 'hsl(var(--color-primary-content))'
-                        : hsl(nodeColor).darker(1)}
+                        : hsl(nodeColor).darker(1).toString()}
                       stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                       fill={nodeColor}
                       rx={5}
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index 633683866..0a01a67a6 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -290,7 +290,7 @@
                 width={nodeWidth}
                 height={nodeHeight}
                 fill={colorScale(node[nodeColorBy])}
-                fill-opacity={0.5}
+                fillOpacity={0.5}
                 on:pointerover={() => {
                   highlightLinkIndexes = [
                     ...(node.sourceLinks?.map((l) => l.index) ?? []),
@@ -409,7 +409,7 @@
                 width={nodeWidth}
                 height={nodeHeight}
                 fill={colorScale(node[nodeColorBy])}
-                fill-opacity={0.5}
+                fillOpacity={0.5}
                 on:pointerover={() => {
                   highlightLinkIndexes = [
                     ...(node.sourceLinks?.map((l) => l.index) ?? []),
diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
index 41e70e410..06f9cf2d7 100644
--- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
@@ -4,7 +4,17 @@
   import { scaleLinear } from 'd3-scale';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, Group, HitCanvas, Svg, Tooltip } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    Group,
+    HitCanvas,
+    renderPathData,
+    spikePath,
+    Svg,
+    Tooltip,
+  } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -158,33 +168,20 @@
           class="fill-surface-content/10 stroke-surface-100"
           {strokeWidth}
         />
-      </Canvas>
 
-      <Canvas>
         <GeoPath
-          class="stroke-danger fill-danger/25"
-          render={(ctx, { geoPath }) => {
-            const computedStyle = window.getComputedStyle(ctx.canvas);
-
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
+              const geoPath = newGeoPath();
               const [x, y] = geoPath.centroid(feature);
               const d = feature.properties.data;
               const height = heightScale(d?.population ?? 0);
 
-              ctx.lineWidth = strokeWidth;
-              ctx.strokeStyle = computedStyle.stroke;
-              ctx.fillStyle = computedStyle.fill;
-
-              const startPoint = [x - width / 2, y];
-              const midPoint = [x, y - height];
-              const endPoint = [x + width / 2, y];
-
-              ctx.beginPath();
-              ctx.moveTo(x - width / 2, y); // startPoint
-              ctx.lineTo(x, y - height); // midPoint
-              ctx.lineTo(x + width / 2, y); // endPoint
-              ctx.fill();
-              ctx.stroke();
+              const pathData = spikePath({ x, y, width, height });
+              renderPathData(ctx, pathData, {
+                classes: 'stroke-danger fill-danger/25',
+                styles: { strokeWidth },
+              });
             }
           }}
         />
@@ -207,14 +204,12 @@
         on:pointerleave={tooltip.hide}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (var feature of enrichedCountiesFeatures) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index f5c6a5cf3..fba55abe8 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -196,10 +196,10 @@
                       height={nodeHeight}
                       stroke={colorBy === 'children'
                         ? 'hsl(var(--color-primary-content))'
-                        : hsl(nodeColor).darker(1)}
+                        : hsl(nodeColor).darker(1).toString()}
                       stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                       fill={nodeColor}
-                      fill-opacity={node.children ? 0.5 : 1}
+                      fillOpacity={node.children ? 0.5 : 1}
                       rx={5}
                     />
                     <RectClipPath width={nodeWidth} height={nodeHeight}>
@@ -337,10 +337,10 @@
                   height={nodeHeight}
                   stroke={colorBy === 'children'
                     ? 'hsl(var(--color-primary-content))'
-                    : hsl(nodeColor).darker(1)}
+                    : hsl(nodeColor).darker(1).toString()}
                   stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                   fill={nodeColor}
-                  fill-opacity={node.children ? 0.5 : 1}
+                  fillOpacity={node.children ? 0.5 : 1}
                   rx={5}
                   tweened={{ delay: 600 }}
                 />
@@ -448,7 +448,7 @@
                           height={nodeHeight}
                           stroke={colorBy === 'children'
                             ? 'hsl(var(--color-primary-content))'
-                            : hsl(nodeColor).darker(1)}
+                            : hsl(nodeColor).darker(1).toString()}
                           stroke-opacity={colorBy === 'children' ? 0.2 : 1}
                           fill={nodeColor}
                           rx={5}
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
index eb19b0bad..67455a8d9 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
@@ -12,6 +12,7 @@
     Svg,
     Tooltip,
     geoFitObjectTransform,
+    renderPathData,
   } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
   import { SelectField } from 'svelte-ux';
@@ -282,6 +283,7 @@
             transform.reset();
           } else {
             selectedStateId = feature.id;
+            tooltip.hide();
             const featureTransform = geoFitObjectTransform(projection, [width, height], feature);
             transform.setTranslate(featureTransform.translate);
             transform.setScale(featureTransform.scale);
@@ -289,14 +291,13 @@
         }}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (const feature of states.features) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
@@ -305,10 +306,9 @@
             for (const feature of selectedCountiesFeatures) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              // Stroking shape seems to help with dark border, but there is still antialising and thus gaps
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
@@ -354,9 +354,7 @@
           class="stroke-surface-content fill-surface-100 hover:fill-surface-content/10"
           strokeWidth={1 / transform.scale}
         />
-      </Canvas>
 
-      <Canvas>
         <!-- TODO: Fade in with delay like SVG -->
         <!-- <g in:fade={{ duration: 300, delay: 600 }} out:fade={{ duration: 300 }}> -->
         <GeoPath
@@ -372,6 +370,7 @@
         <!-- </g> -->
       </Canvas>
 
+      <!-- Provides better performance by rendering tooltip path on separate <Canvas> -->
       {#if tooltip.data}
         <Canvas>
           <GeoPath
@@ -399,6 +398,7 @@
             transform.reset();
           } else {
             selectedStateId = feature.id;
+            tooltip.hide();
             let [[left, top], [right, bottom]] = geoPath.bounds(feature);
             let width = right - left;
             let height = bottom - top;
@@ -411,14 +411,12 @@
         }}
       >
         <GeoPath
-          render={(ctx, { geoPath }) => {
+          render={(ctx, { newGeoPath }) => {
             for (const feature of states.features) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
@@ -427,10 +425,8 @@
             for (const feature of selectedCountiesFeatures) {
               const color = nextColor();
 
-              ctx.beginPath();
-              geoPath(feature);
-              ctx.fillStyle = color;
-              ctx.fill();
+              const geoPath = newGeoPath();
+              renderPathData(ctx, geoPath(feature), { styles: { fill: color, stroke: color } });
 
               setColorData(color, feature);
             }
diff --git a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
index a462184b5..f73aa8cdd 100644
--- a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
@@ -15,7 +15,16 @@
   import { schemeCategory10 } from 'd3-scale-chromatic';
   import { color } from 'd3-color';
 
-  import { Canvas, Chart, GeoPath, GeoTile, HitCanvas, Svg, Tooltip } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    GeoTile,
+    HitCanvas,
+    renderPathData,
+    Svg,
+    Tooltip,
+  } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
   import {
     EmptyMessage,
@@ -115,26 +124,30 @@
           {#if projection === geoMercator}
             <!-- <GeoPath {geojson} class="stroke-black fill-black/50" /> -->
             <GeoPath
-              render={(ctx, { geoPath }) => {
+              render={(ctx, { newGeoPath }) => {
                 for (var feature of features) {
-                  ctx.beginPath();
-                  geoPath(feature);
-                  ctx.fillStyle = colorScale(String(feature.id));
-                  ctx.fill();
-                  ctx.stroke();
+                  const geoPath = newGeoPath();
+                  renderPathData(ctx, geoPath(feature), {
+                    styles: {
+                      fill: colorScale(String(feature.id)),
+                      stroke: 'black',
+                    },
+                  });
                 }
               }}
             />
           {:else}
             <!-- <GeoPath {geojson} class="stroke-surface-content fill-surface-100" /> -->
             <GeoPath
-              render={(ctx, { geoPath }) => {
+              render={(ctx, { newGeoPath }) => {
                 for (var feature of features) {
-                  ctx.beginPath();
-                  geoPath(feature);
-                  ctx.fillStyle = colorScale(String(feature.id));
-                  ctx.fill();
-                  ctx.stroke();
+                  const geoPath = newGeoPath();
+                  renderPathData(ctx, geoPath(feature), {
+                    styles: {
+                      fill: colorScale(String(feature.id)),
+                      stroke: 'black',
+                    },
+                  });
                 }
               }}
             />
@@ -148,14 +161,17 @@
           on:pointerleave={tooltip.hide}
         >
           <GeoPath
-            render={(ctx, { geoPath }) => {
+            render={(ctx, { newGeoPath }) => {
               for (var feature of features) {
                 const color = nextColor();
 
-                ctx.beginPath();
-                geoPath(feature);
-                ctx.fillStyle = color;
-                ctx.fill();
+                const geoPath = newGeoPath();
+                renderPathData(ctx, geoPath(feature), {
+                  styles: {
+                    fill: color,
+                    stroke: color,
+                  },
+                });
 
                 setColorData(color, feature);
               }
diff --git a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
index b8e8860e4..7f746bcb4 100644
--- a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
@@ -17,7 +17,16 @@
   import { feature } from 'topojson-client';
   import type { GeometryCollection, Topology } from 'topojson-specification';
 
-  import { Canvas, Chart, GeoPath, GeoTile, HitCanvas, Svg, Tooltip } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    GeoTile,
+    HitCanvas,
+    renderPathData,
+    Svg,
+    Tooltip,
+  } from 'layerchart';
   import TransformControls from 'layerchart/components/TransformControls.svelte';
   import {
     CopyButton,
@@ -122,26 +131,30 @@
           {#if projection === geoMercator}
             <!-- <GeoPath {geojson} class="stroke-black fill-black/50" /> -->
             <GeoPath
-              render={(ctx, { geoPath }) => {
+              render={(ctx, { newGeoPath }) => {
                 for (var feature of features) {
-                  ctx.beginPath();
-                  geoPath(feature);
-                  ctx.fillStyle = colorScale(String(feature.id));
-                  ctx.fill();
-                  ctx.stroke();
+                  const geoPath = newGeoPath();
+                  renderPathData(ctx, geoPath(feature), {
+                    styles: {
+                      fill: colorScale(String(feature.id)),
+                      stroke: 'black',
+                    },
+                  });
                 }
               }}
             />
           {:else}
             <!-- <GeoPath {geojson} class="stroke-surface-content fill-surface-100" /> -->
             <GeoPath
-              render={(ctx, { geoPath }) => {
+              render={(ctx, { newGeoPath }) => {
                 for (var feature of features) {
-                  ctx.beginPath();
-                  geoPath(feature);
-                  ctx.fillStyle = colorScale(String(feature.id));
-                  ctx.fill();
-                  ctx.stroke();
+                  const geoPath = newGeoPath();
+                  renderPathData(ctx, geoPath(feature), {
+                    styles: {
+                      fill: colorScale(String(feature.id)),
+                      stroke: 'black',
+                    },
+                  });
                 }
               }}
             />
@@ -155,14 +168,17 @@
           on:pointerleave={tooltip.hide}
         >
           <GeoPath
-            render={(ctx, { geoPath }) => {
+            render={(ctx, { newGeoPath }) => {
               for (var feature of features) {
                 const color = nextColor();
 
-                ctx.beginPath();
-                geoPath(feature);
-                ctx.fillStyle = color;
-                ctx.fill();
+                const geoPath = newGeoPath();
+                renderPathData(ctx, geoPath(feature), {
+                  styles: {
+                    fill: color,
+                    stroke: color,
+                  },
+                });
 
                 setColorData(color, feature);
               }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a06c150e..8b21048ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,7 +19,7 @@ importers:
         version: 6.0.1
       wrangler:
         specifier: ^3.95.0
-        version: 3.95.0(@cloudflare/workers-types@4.20241218.0)
+        version: 3.95.0(@cloudflare/workers-types@4.20241230.0)
 
   packages/layerchart:
     dependencies:
@@ -27,8 +27,8 @@ importers:
         specifier: ^1.1.4
         version: 1.1.4
       '@layerstack/svelte-actions':
-        specifier: ^0.0.9
-        version: 0.0.9
+        specifier: ^0.0.11
+        version: 0.0.11
       '@layerstack/svelte-stores':
         specifier: ^0.0.9
         version: 0.0.9
@@ -122,16 +122,16 @@ importers:
         version: 3.0.5(rollup@2.79.2)
       '@sveltejs/adapter-cloudflare':
         specifier: ^4.8.0
-        version: 4.8.0(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(wrangler@3.99.0(@cloudflare/workers-types@4.20241218.0))
+        version: 4.8.0(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(wrangler@3.99.0(@cloudflare/workers-types@4.20241230.0))
       '@sveltejs/kit':
         specifier: ^2.11.1
-        version: 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+        version: 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       '@sveltejs/package':
         specifier: ^2.3.7
         version: 2.3.7(svelte@5.13.0)(typescript@5.7.2)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.2
-        version: 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+        version: 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.2.0
         version: 1.2.0
@@ -251,7 +251,7 @@ importers:
         version: 2.2.0(svelte@5.13.0)
       svelte-ux:
         specifier: ^0.76.0
-        version: 0.76.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49)(svelte@5.13.0)
+        version: 0.76.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@5.13.0)
       svelte2tsx:
         specifier: ^0.7.30
         version: 0.7.30(svelte@5.13.0)(typescript@5.7.2)
@@ -275,10 +275,10 @@ importers:
         version: 3.0.1
       vite:
         specifier: ^6.0.3
-        version: 6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)
+        version: 6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)
       vitest:
         specifier: ^2.1.8
-        version: 2.1.8(@types/node@22.10.2)
+        version: 2.1.8(@types/node@22.10.4)
 
 packages:
 
@@ -423,8 +423,8 @@ packages:
   '@cloudflare/workers-types@4.20241205.0':
     resolution: {integrity: sha512-pj1VKRHT/ScQbHOIMFODZaNAlJHQHdBSZXNIdr9ebJzwBff9Qz8VdqhbhggV7f+aUEh8WSbrsPIo4a+WtgjUvw==}
 
-  '@cloudflare/workers-types@4.20241218.0':
-    resolution: {integrity: sha512-Y0brjmJHcAZBXOPI7lU5hbiXglQWniA1kQjot2ata+HFimyjPPcz+4QWBRrmWcMPo0OadR2Vmac7WStDLpvz0w==}
+  '@cloudflare/workers-types@4.20241230.0':
+    resolution: {integrity: sha512-dtLD4jY35Lb750cCVyO1i/eIfdZJg2Z0i+B1RYX6BVeRPlgaHx/H18ImKAkYmy0g09Ow8R2jZy3hIxMgXun0WQ==}
 
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
@@ -903,8 +903,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@layerstack/svelte-actions@0.0.9':
-    resolution: {integrity: sha512-1mDXM7R0pT3pvQvXS479hN9tkn6M812Iip9M7BSorDTQcccGNVGU67aqLO5qded7CuzRnyeN2id5KcVU5zfY8A==}
+  '@layerstack/svelte-actions@0.0.11':
+    resolution: {integrity: sha512-sfplFX8rOBW74xjDCAY7QzHilvUGjFQTkfQXxUO6e68cKCHmxsSuTCtFbHRCfIUJCQ31gAbeY1xpWKnlVfgZ9g==}
 
   '@layerstack/svelte-stores@0.0.9':
     resolution: {integrity: sha512-5yyi7eV/2hOraw7wQgEObVR4s2/4T3G/GjGaZLR9BQH8mnsLuXw1n3k6rFT8NxiRvpEjWJ9l9ILOGc/XzFJb3g==}
@@ -1207,6 +1207,9 @@ packages:
   '@types/node@22.10.2':
     resolution: {integrity: sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==}
 
+  '@types/node@22.10.4':
+    resolution: {integrity: sha512-99l6wv4HEzBQhvaU/UGoeBoCK61SCROQaCCGyQSgX2tEQ3rKkNZ2S7CEWnS/4s1LV+8ODdK21UeyR1fHP2mXug==}
+
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
@@ -2894,6 +2897,11 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yaml@2.7.0:
+    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   youch@3.3.4:
     resolution: {integrity: sha512-UeVBXie8cA35DS6+nBkls68xaBBXCye0CNznrhszZjTbRVnJKQuNsyLKBTTL4ln1o1rh2PKtv35twV7irj5SEg==}
 
@@ -3109,7 +3117,7 @@ snapshots:
 
   '@cloudflare/workers-types@4.20241205.0': {}
 
-  '@cloudflare/workers-types@4.20241218.0':
+  '@cloudflare/workers-types@4.20241230.0':
     optional: true
 
   '@cspotcode/source-map-support@0.8.1':
@@ -3385,7 +3393,7 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  '@layerstack/svelte-actions@0.0.9':
+  '@layerstack/svelte-actions@0.0.11':
     dependencies:
       '@floating-ui/dom': 1.6.12
       '@layerstack/utils': 0.0.7
@@ -3554,17 +3562,17 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.28.1':
     optional: true
 
-  '@sveltejs/adapter-cloudflare@4.8.0(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(wrangler@3.99.0(@cloudflare/workers-types@4.20241218.0))':
+  '@sveltejs/adapter-cloudflare@4.8.0(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(wrangler@3.99.0(@cloudflare/workers-types@4.20241230.0))':
     dependencies:
       '@cloudflare/workers-types': 4.20241205.0
-      '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+      '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       esbuild: 0.24.0
       worktop: 0.8.0-next.18
-      wrangler: 3.99.0(@cloudflare/workers-types@4.20241218.0)
+      wrangler: 3.99.0(@cloudflare/workers-types@4.20241230.0)
 
-  '@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))':
+  '@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -3578,7 +3586,7 @@ snapshots:
       sirv: 3.0.0
       svelte: 5.13.0
       tiny-glob: 0.2.9
-      vite: 6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)
+      vite: 6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)
 
   '@sveltejs/package@2.3.7(svelte@5.13.0)(typescript@5.7.2)':
     dependencies:
@@ -3591,25 +3599,25 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+      '@sveltejs/vite-plugin-svelte': 5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       debug: 4.4.0
       svelte: 5.13.0
-      vite: 6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)
+      vite: 6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))':
+  '@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.2(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)))(svelte@5.13.0)(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.15
       svelte: 5.13.0
-      vite: 6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)
-      vitefu: 1.0.4(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1))
+      vite: 6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)
+      vitefu: 1.0.4(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -3710,6 +3718,11 @@ snapshots:
     dependencies:
       undici-types: 6.20.0
 
+  '@types/node@22.10.4':
+    dependencies:
+      undici-types: 6.20.0
+    optional: true
+
   '@types/prismjs@1.26.5': {}
 
   '@types/resolve@1.17.1':
@@ -3746,13 +3759,13 @@ snapshots:
       chai: 5.1.2
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.8(vite@5.4.11(@types/node@22.10.2))':
+  '@vitest/mocker@2.1.8(vite@5.4.11(@types/node@22.10.4))':
     dependencies:
       '@vitest/spy': 2.1.8
       estree-walker: 3.0.3
       magic-string: 0.30.15
     optionalDependencies:
-      vite: 5.4.11(@types/node@22.10.2)
+      vite: 5.4.11(@types/node@22.10.4)
 
   '@vitest/pretty-format@2.1.8':
     dependencies:
@@ -4694,13 +4707,13 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.49
 
-  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.4.2
       postcss: 8.4.49
-      yaml: 2.6.1
+      yaml: 2.7.0
     optional: true
 
   postcss-nested@6.2.0(postcss@8.4.49):
@@ -4974,7 +4987,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  sveld@0.22.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49):
+  sveld@0.22.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49):
     dependencies:
       '@rollup/plugin-node-resolve': 13.3.0(rollup@2.79.2)
       acorn: 8.14.0
@@ -4983,7 +4996,7 @@ snapshots:
       rollup: 2.79.2
       rollup-plugin-svelte: 7.2.2(rollup@2.79.2)(svelte@4.2.19)
       svelte: 4.2.19
-      svelte-preprocess: 6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.2)
+      svelte-preprocess: 6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.2)
       tinyglobby: 0.2.10
       typescript: 5.7.2
     transitivePeerDependencies:
@@ -5013,15 +5026,15 @@ snapshots:
     dependencies:
       svelte: 5.13.0
 
-  svelte-preprocess@6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.2):
+  svelte-preprocess@6.0.3(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@4.2.19)(typescript@5.7.2):
     dependencies:
       svelte: 4.2.19
     optionalDependencies:
       postcss: 8.4.49
-      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0)
       typescript: 5.7.2
 
-  svelte-ux@0.76.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49)(svelte@5.13.0):
+  svelte-ux@0.76.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)(svelte@5.13.0):
     dependencies:
       '@floating-ui/dom': 1.6.12
       '@fortawesome/fontawesome-common-types': 6.7.1
@@ -5037,7 +5050,7 @@ snapshots:
       prism-svelte: 0.5.0
       prism-themes: 1.9.0
       prismjs: 1.29.0
-      sveld: 0.22.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.6.1))(postcss@8.4.49)
+      sveld: 0.22.0(postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.4.49)(yaml@2.7.0))(postcss@8.4.49)
       svelte: 5.13.0
       tailwind-merge: 2.5.5
       zod: 3.24.1
@@ -5237,13 +5250,13 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-stringify-position: 2.0.3
 
-  vite-node@2.1.8(@types/node@22.10.2):
+  vite-node@2.1.8(@types/node@22.10.4):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       es-module-lexer: 1.5.4
       pathe: 1.1.2
-      vite: 5.4.11(@types/node@22.10.2)
+      vite: 5.4.11(@types/node@22.10.4)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -5255,34 +5268,34 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.11(@types/node@22.10.2):
+  vite@5.4.11(@types/node@22.10.4):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.49
       rollup: 4.28.1
     optionalDependencies:
-      '@types/node': 22.10.2
+      '@types/node': 22.10.4
       fsevents: 2.3.3
 
-  vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1):
+  vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0):
     dependencies:
       esbuild: 0.24.0
       postcss: 8.4.49
       rollup: 4.28.1
     optionalDependencies:
-      '@types/node': 22.10.2
+      '@types/node': 22.10.4
       fsevents: 2.3.3
       jiti: 2.4.2
-      yaml: 2.6.1
+      yaml: 2.7.0
 
-  vitefu@1.0.4(vite@6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)):
+  vitefu@1.0.4(vite@6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)):
     optionalDependencies:
-      vite: 6.0.3(@types/node@22.10.2)(jiti@2.4.2)(yaml@2.6.1)
+      vite: 6.0.3(@types/node@22.10.4)(jiti@2.4.2)(yaml@2.7.0)
 
-  vitest@2.1.8(@types/node@22.10.2):
+  vitest@2.1.8(@types/node@22.10.4):
     dependencies:
       '@vitest/expect': 2.1.8
-      '@vitest/mocker': 2.1.8(vite@5.4.11(@types/node@22.10.2))
+      '@vitest/mocker': 2.1.8(vite@5.4.11(@types/node@22.10.4))
       '@vitest/pretty-format': 2.1.8
       '@vitest/runner': 2.1.8
       '@vitest/snapshot': 2.1.8
@@ -5298,11 +5311,11 @@ snapshots:
       tinyexec: 0.3.1
       tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.11(@types/node@22.10.2)
-      vite-node: 2.1.8(@types/node@22.10.2)
+      vite: 5.4.11(@types/node@22.10.4)
+      vite-node: 2.1.8(@types/node@22.10.4)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.10.2
+      '@types/node': 22.10.4
     transitivePeerDependencies:
       - less
       - lightningcss
@@ -5353,7 +5366,7 @@ snapshots:
       mrmime: 2.0.0
       regexparam: 3.0.0
 
-  wrangler@3.95.0(@cloudflare/workers-types@4.20241218.0):
+  wrangler@3.95.0(@cloudflare/workers-types@4.20241230.0):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@cloudflare/workers-shared': 0.11.0
@@ -5374,14 +5387,14 @@ snapshots:
       workerd: 1.20241205.0
       xxhash-wasm: 1.1.0
     optionalDependencies:
-      '@cloudflare/workers-types': 4.20241218.0
+      '@cloudflare/workers-types': 4.20241230.0
       fsevents: 2.3.3
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  wrangler@3.99.0(@cloudflare/workers-types@4.20241218.0):
+  wrangler@3.99.0(@cloudflare/workers-types@4.20241230.0):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.3.4
       '@esbuild-plugins/node-globals-polyfill': 0.2.3(esbuild@0.17.19)
@@ -5401,7 +5414,7 @@ snapshots:
       workerd: 1.20241218.0
       xxhash-wasm: 1.1.0
     optionalDependencies:
-      '@cloudflare/workers-types': 4.20241218.0
+      '@cloudflare/workers-types': 4.20241230.0
       fsevents: 2.3.3
     transitivePeerDependencies:
       - bufferutil
@@ -5426,6 +5439,9 @@ snapshots:
 
   yaml@2.6.1: {}
 
+  yaml@2.7.0:
+    optional: true
+
   youch@3.3.4:
     dependencies:
       cookie: 0.7.2