Arc

Stopped

Read as Markdown

Full-page experience · Open playground

Draw a stroke-only curved sweep with explicit start and end angles.

Try it

Click the top of the blue arc to switch it to coral.

What to learn

Define an open curved stroke with a radius and radian angles.
Give a narrow painted arc a forgiving interaction width.

Integration boundaries

Arc is stroke-only; it does not close the curve with a chord.
lineInteractionWidth can make a thin visual stroke easier to target.

This is a Pibbl Canvas example. Its mount owns its runtime resources; call its controller’s dispose method when removing it. The preview starts automatically unless reduced motion is enabled; Stop disposes the mount. Preserve the source’s logical canvas size and aspect ratio. Native HTML is not captured by Canvas filters.

Complete source

Host setup for this source: use a canvas with width 720 and height 420, compile with jsx: "react-jsx" and jsxImportSource: "@pibbl/core", import its default mount, and call const controller = mount(canvas) after attaching the canvas. Call controller.dispose() before removing it.

arc.example.tsx

import { Arc, pibbl, useSignal, Rectangle, type PibblController } from "@pibbl/core";

function ArcStudy() {
  const active = useSignal(false);

  return [
    <Rectangle
      style={{ left: 0, top: 0, width: 720, height: 420, fill: "#f7f0df" }}
    />,
    <Arc
      style={{
        cx: 360,
        cy: 210,
        radius: 120,
        startAngle: -Math.PI,
        endAngle: 0,
        stroke: active.get() ? "#ff6b57" : "#1f4bd8",
        strokeWidth: 14,
        lineInteractionWidth: 34,
        cursor: "pointer",
      }}
      onClick={() => active.update((value) => !value)}
    />,
  ];
}

export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <ArcStudy />);
}

Documentation version

Documentation built with @pibbl/core 0.0.2, revision 380919b. ALPHA — NOT FOR PRODUCTION USE.