feat: Add renderCircle to simplify rendering circles to canvas (ins…

…tead of using `renderPath`)
techniq · Feb 4, 2025 · c728af0 · c728af0
1 parent 796f029
commit c728af0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/.changeset/metal-pumpkins-clap.md b/.changeset/metal-pumpkins-clap.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Add `renderCircle` to simplify rendering circles to canvas (instead of using `renderPath`)
diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
@@ -7,8 +7,7 @@
 
   import { motionStore } from '$lib/stores/motionStore.js';
   import { getCanvasContext } from './layout/Canvas.svelte';
-  import { circlePath } from '../utils/path.js';
-  import { renderPathData, type ComputedStylesOptions } from '$lib/utils/canvas.js';
+  import { renderCircle, type ComputedStylesOptions } from '$lib/utils/canvas.js';
 
   export let cx: number = 0;
   export let initialCx = cx;
@@ -53,10 +52,9 @@
     ctx: CanvasRenderingContext2D,
     styleOverrides: ComputedStylesOptions | undefined
   ) {
-    const pathData = circlePath({ cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r });
-    renderPathData(
+    renderCircle(
       ctx,
-      pathData,
+      { cx: $tweened_cx, cy: $tweened_cy, r: $tweened_r },
       styleOverrides
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {

diff --git a/packages/layerchart/src/lib/utils/canvas.ts b/packages/layerchart/src/lib/utils/canvas.ts
@@ -211,6 +211,28 @@ export function renderRect(
   );
 }
 
+export function renderCircle(
+  ctx: CanvasRenderingContext2D,
+  coords: { cx: number; cy: number; r: number },
+  styleOptions: ComputedStylesOptions = {}
+) {
+  ctx.beginPath();
+  ctx.arc(coords.cx, coords.cy, coords.r, 0, 2 * Math.PI);
+  render(
+    ctx,
+    {
+      fill: (ctx) => {
+        ctx.fill();
+      },
+      stroke: (ctx) => {
+        ctx.stroke();
+      },
+    },
+    styleOptions
+  );
+  ctx.closePath();
+}
+
 /** Clear canvas accounting for Canvas `context.translate(...)` */
 export function clearCanvasContext(
   ctx: CanvasRenderingContext2D,