# Rectangle
[Full-page experience](/experience/rectangle/) · [Open playground](/playground/#/examples/drawing/rectangle)

Use rectangles as bold blocks of color, outlined frames, and precise layout anchors.

## Try it

Hover the coral block to confirm its target area.

## What to learn

- Declare rectangle geometry and paint inside one explicit style object.
- Combine fill, stroke, alpha, and pixel-grid alignment.

## Integration boundaries

- A rectangle can be fill-only, stroke-only, or both.
- cornerRadius and cornerRadii round every corner or target individual corners without changing the rectangle's box.
- Visual and layout values stay local under `style`; event handlers remain separate props.

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

- [Rectangle](/reference/components/rectangle/)

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

### rectangle.example.tsx

```tsx
import { pibbl, useSignal, Rectangle, Text, type PibblController } from "@pibbl/core";
function RectangleStudy() {
  const hovered = useSignal(false);
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    <Rectangle
      style={{
        left: 54,
        top: 52,
        width: 252,
        height: 316,
        fill: "#1f4bd8",
        cornerRadius: 28,
      }}
    />,
    <Rectangle
      style={{
        left: 268,
        top: 104,
        width: 280,
        height: 190,
        fill: hovered.get() ? "#74d3ae" : "#ff6b57",
        stroke: "#17211d",
        strokeWidth: 6,
        cursor: "crosshair",
        cornerRadii: [32, 8, 32, 8],
      }}
      onMouseOver={() => hovered.set(true)}
      onMouseOut={() => hovered.set(false)}
    />,
    <Rectangle
      style={{
        left: 534,
        top: 50,
        width: 132,
        height: 132,
        fill: "#f7c948",
        stroke: "#17211d",
        strokeWidth: 2,
        alignToPixelGrid: "round",
      }}
    />,
    <Rectangle
      style={{
        left: 406,
        top: 292,
        width: 260,
        height: 76,
        stroke: "#17211d",
        strokeWidth: 6,
      }}
    />,
    <Text
      style={{
        left: 536,
        top: 330,
        fill: "#17211d",
        font: "800 16px sans-serif",
        textAlign: "center",
        textBaseline: "middle",
      }}
    >
      {hovered.get() ? "TARGET FOUND" : "RECTANGLE STUDY"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <RectangleStudy />);
}

```

## Documentation version

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