# createRectanglePath

```ts
import { Clip, createRectanglePath, Rectangle } from "@pibbl/core";
```

[`RectanglePathOptions`](/reference/types/elements-components/#rectanglepathoptions) is accepted by `createRectanglePath(options): Path2D`, which creates a fresh
rectangle from numeric width, height, optional position, and optional numeric
corner radii. Width and height remain signed, matching [`Canvas`](/reference/types/canvas-runtime/#canvas) rectangle
semantics. It owns no render state.

```tsx
<Clip
  style={{
    d: createRectanglePath({
      x: 0,
      y: 0,
      width: 180,
      height: 100,
      cornerRadius: 12,
    }),
  }}
>
  <Rectangle style={{ width: 180, height: 100, fill: "#2563eb" }} />
</Clip>
```

Try the [Rectangle live example](/playground/#/examples/drawing/rectangle).

## API details from source

<span id="api-createRectanglePath"></span>

Creates a Canvas Path2D for rectangle geometry from validated options.

```ts
createRectanglePath: (options: Readonly<RectanglePathOptions>) => Path2D
```

Related API: [createRectanglePath](/reference/functions/create-rectangle-path/), [RectanglePathOptions](/reference/types/elements-components/#rectanglepathoptions).

### Parameters

- **`options`** — Rectangle bounds and corner options. See [RectanglePathOptions](/reference/types/elements-components/#rectanglepathoptions).

### Returns

A native Canvas path containing the rectangle.

### See also

[RectanglePathOptions](/reference/types/elements-components/#rectanglepathoptions)

[View source — packages/core/src/lib/geometry/rectangle.ts:44](/source/packages/core/src/lib/geometry/rectangle-ts/#L44)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Polygon path factories](/minimal-examples/paths/polygon-factories/): Create rounded rectangles and polygons alongside regular and star shapes. [Plain source](/minimal/paths/polygon-factories.ts)
## Documentation version

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