# Arc
[Full-page experience](/experience/arc/) · [Open playground](/playground/#/examples/drawing/arc)

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.

## Related APIs

- [Arc](/reference/components/arc/)

## 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

```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 272a94a. ALPHA — NOT FOR PRODUCTION USE.