# Path
[Full-page experience](/experience/path/) · [Open playground](/playground/#/examples/drawing/path)

Draw custom geometry with the browser’s Path2D vocabulary and let Pibbl paint it.

## Try it

Move over the mint star and watch the center glow.

## What to learn

- Construct a reusable Path2D.
- Paint and target custom filled or stroked geometry.

## Integration boundaries

- Pibbl accepts a native `Path2D`, so Canvas path commands remain familiar.
- Filled paths use their fill geometry for hit testing; strokes can opt into a wider interaction width.

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

- [Path](/reference/components/path/)

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

### path.example.tsx

```tsx
import {
  pibbl,
  useSignal,
  Path,
  Rectangle,
  Text,
  type PibblController,
} from "@pibbl/core";
function PathStudy() {
  const inside = useSignal(false);
  const star = new Path2D();
  const points = [
    [360, 66],
    [395, 156],
    [490, 160],
    [416, 218],
    [442, 314],
    [360, 258],
    [278, 314],
    [304, 218],
    [230, 160],
    [325, 156],
  ];
  star.moveTo(points[0][0], points[0][1]);
  for (const [x, y] of points.slice(1)) star.lineTo(x, y);
  star.closePath();
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#17211d",
      }}
    />,
    <Path
      style={{
        d: star,
        fill: inside.get() ? "#f7c948" : "#74d3ae",
        stroke: "#fffdf6",
        strokeWidth: 6,
        cursor: "crosshair",
      }}
      onMouseOver={() => inside.set(true)}
      onMouseOut={() => inside.set(false)}
    />,
    <Text
      style={{
        left: 360,
        top: 350,
        fill: "#fffdf6",
        font: "700 18px monospace",
        textAlign: "center",
      }}
    >
      {inside.get() ? "PATH2D!" : "TRACE THE STAR"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <PathStudy />);
}

```

## Documentation version

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