[Arc] Clippath and Gradient for canvas

[cycle4passion]

Gauge Example

canvas layer does not to clip or show gradient.

I think it's 2 fold... 1 issue is similar to what we recently added GeoClipPath as supporting the clip snippet for ClipPath is a little tricky for Canvas...

{#snippet clip()} {/snippet}

we might need to ArcClipPath (although I hate to keep adding a ClipPath for every shape :)). Might be a way to hook into the rendering call of Arc and bubble up to ClipPath...
also, gradients in Canvas are a little tricky as they don't have the concept of objectBoundingBox and gets tricky to great "relative" gradients (not just global) - https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/components/LinearGradient.svelte#L163-L171

[cycle4passion]

Research

The objectBoundingBox Problem in Canvas
In SVG, gradients with gradientUnits="objectBoundingBox" (the default) define coordinates as percentages of each individual shape's bounding box — so x1="0%" to x2="100%" always spans the full width of that element, regardless of where it is on screen.
Canvas has no such concept. Canvas gradient coordinates are always absolute pixel values in the canvas coordinate system. So if you create one CanvasLinearGradient and apply it to multiple shapes at different positions, it won't "follow" each shape — the gradient bleeds across them all from fixed canvas coords.

Solutions

1. Recompute the gradient per shape (most correct)
   For each shape you draw, create a fresh gradient using that shape's own bounding box:

function drawShapeWithGradient(ctx, x, y, width, height, colorStops) {
  // Gradient coordinates are relative to THIS shape's bbox
  const grad = ctx.createLinearGradient(x, y, x + width, y);
  // ^ horizontal: left edge to right edge of shape

  for (const [offset, color] of colorStops) {
    grad.addColorStop(offset, color);
  }

  ctx.fillStyle = grad;
  ctx.fillRect(x, y, width, height);
}

In a chart context (like LayerChart's Canvas renderer), you'd pass the computed x, y, width, height of each bar/area/path into this helper.

2. Use ctx.save() / ctx.restore() + translate to a local coordinate space
   Transform the canvas so each shape is drawn at the origin, then use a normalized [0,0] → [1,0] gradient scaled to the shape's size:

function drawWithLocalGradient(ctx, x, y, width, height, colorStops) {
  ctx.save();
  ctx.translate(x, y);

  // Now shape is at origin — gradient from 0 to width
  const grad = ctx.createLinearGradient(0, 0, width, 0);
  for (const [offset, color] of colorStops) {
    grad.addColorStop(offset, color);
  }

  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, width, height);

  ctx.restore();
}

This is essentially manually emulating objectBoundingBox — it's clean and composable.

3. Normalize to [0,1] space via a helper (LayerChart-style abstraction)
   If you want to mirror the SVG API where stops use 0–1 fractions and direction can be expressed as an angle or {x1,y1,x2,y2} in relative terms:

/**
 * Creates a canvas gradient equivalent to SVG's objectBoundingBox mode.
 * x1/y1/x2/y2 are 0–1 fractions of the shape's bbox.
 */
function createBoundingBoxGradient(ctx, bbox, { x1 = 0, y1 = 0, x2 = 1, y2 = 0 }, stops) {
  const { x, y, width, height } = bbox;

  const grad = ctx.createLinearGradient(
    x + x1 * width,
    y + y1 * height,
    x + x2 * width,
    y + y2 * height
  );

  for (const [offset, color] of stops) {
    grad.addColorStop(offset, color);
  }

  return grad;
}

// Usage — horizontal gradient across a bar
const grad = createBoundingBoxGradient(
  ctx,
  { x: 50, y: 100, width: 200, height: 40 },
  { x1: 0, y1: 0, x2: 1, y2: 0 },
  [[0, 'rgba(99,102,241,0.8)'], [1, 'rgba(99,102,241,0)']]
);
ctx.fillStyle = grad;
ctx.fillRect(50, 100, 200, 40);

This is the cleanest API — it directly maps to how LayerChart's SVG LinearGradient works, just computed at draw time rather than declared in the DOM.

The Key Insight
The reason SVG gradients are "free" is that the gradient is declared once and the browser re-evaluates coordinates per element at render time. In Canvas, you pay that cost explicitly — you either recompute per shape, or transform the coordinate space. Option 3's createBoundingBoxGradient helper is the closest drop-in equivalent and keeps the calling code clean.