# Line
[Full-page experience](/experience/line/) · [Open playground](/playground/#/examples/drawing/line)

Connect a sequence of coordinates into expressive polylines and diagrams.

## Try it

Trace the cobalt route with the mouse.

## What to learn

- Draw a multi-segment line from coordinate pairs.
- Separate visible stroke width from a forgiving mouse hit width.

## Integration boundaries

- Coordinates are visited in array order.
- `lineInteractionWidth` can make a thin line easier to target without changing its paint.

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

- [Line](/reference/components/line/)

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

### line.example.tsx

```tsx
import {
  pibbl,
  useSignal,
  Line,
  Rectangle,
  Text,
  type PibblController,
} from "@pibbl/core";
function LineStudy() {
  const tracking = useSignal(false);
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    <Line
      style={{
        coords: [
          [64, 338],
          [174, 238],
          [270, 278],
          [370, 112],
          [478, 184],
          [650, 68],
        ],
        stroke: "#17211d",
        strokeWidth: 18,
      }}
    />,
    <Line
      style={{
        coords: [
          [64, 328],
          [174, 228],
          [270, 268],
          [370, 102],
          [478, 174],
          [650, 58],
        ],
        stroke: tracking.get() ? "#ff6b57" : "#1f4bd8",
        strokeWidth: 7,
        lineInteractionWidth: 34,
        cursor: "crosshair",
      }}
      onMouseOver={() => tracking.set(true)}
      onMouseOut={() => tracking.set(false)}
    />,
    <Text
      style={{
        left: 64,
        top: 56,
        fill: "#17211d",
        font: "800 18px monospace",
      }}
    >
      {tracking.get() ? "ON THE ROUTE" : "FOLLOW THE ROUTE"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <LineStudy />);
}

```

## Documentation version

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