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

Place crisp horizontal rules without repeating endpoint coordinates.

## Try it

Sweep across the three colored rules.

## What to learn

- Draw a rule from left to right.
- Align narrow strokes to the Canvas pixel grid.

## Integration boundaries

- Omitted bounds extend to the Canvas edges.
- Pixel alignment is opt-in and supports `none`, `round`, `ceil`, and `floor`.

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

- [HorizontalLine](/reference/components/horizontal-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.

### horizontal-line.example.tsx

```tsx
import {
  pibbl,
  useSignal,
  HorizontalLine,
  Rectangle,
  Text,
  type PibblController,
} from "@pibbl/core";
function HorizontalStudy() {
  const band = useSignal("none");
  const rule = (y: number, color: string, name: string) => (
    <HorizontalLine
      style={{
        y,
        x1: 82,
        x2: 638,
        stroke: color,
        strokeWidth: band.get() === name ? 14 : 5,
        lineInteractionWidth: 30,
        alignToPixelGrid: "round",
      }}
      onMouseOver={() => band.set(name)}
      onMouseOut={() => band.set("none")}
    />
  );
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#17211d",
      }}
    />,
    <Text
      style={{
        left: 82,
        top: 54,
        fill: "#fffdf6",
        font: "800 24px sans-serif",
      }}
    >
      {"HORIZONTAL RHYTHM"}
    </Text>,
    rule(154, "#1f4bd8", "cobalt"),
    rule(230, "#ff6b57", "coral"),
    rule(306, "#f7c948", "yellow"),
    <Text
      style={{
        left: 638,
        top: 344,
        fill: "#74d3ae",
        font: "700 14px monospace",
        textAlign: "right",
      }}
    >
      {band.get() === "none" ? "SWEEP THE LINES" : band.get().toUpperCase()}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <HorizontalStudy />);
}

```

## Documentation version

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