# Polygon path factories
Create rounded rectangles and polygons alongside regular and star shapes.

## APIs demonstrated

- [createPolygonPath](/reference/functions/create-polygon-path/) from `@pibbl/core`
- [createRectanglePath](/reference/functions/create-rectangle-path/) from `@pibbl/core`
- [createRegularPolygonPath](/reference/functions/create-regular-polygon-path/) from `@pibbl/core`
- [createStarPath](/reference/functions/create-star-path/) from `@pibbl/core`
- [PolygonPathOptions](/reference/types/elements-components/) from `@pibbl/core`
- [RectanglePathOptions](/reference/types/elements-components/) from `@pibbl/core`
- [RegularPolygonNumericSize](/reference/types/elements-components/) from `@pibbl/core`
- [RegularPolygonPathOptions](/reference/types/elements-components/) from `@pibbl/core`
- [RegularPolygonPathPosition](/reference/types/elements-components/) from `@pibbl/core`
- [RoundedCornerPathOptions](/reference/types/elements-components/) from `@pibbl/core`
- [StarPathOptions](/reference/types/elements-components/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/paths/polygon-factories.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import {
  createPolygonPath,
  createRectanglePath,
  createRegularPolygonPath,
  createStarPath,
  type PolygonPathOptions,
  type RectanglePathOptions,
  type RegularPolygonNumericSize,
  type RegularPolygonPathOptions,
  type RegularPolygonPathPosition,
  type RoundedCornerPathOptions,
  type StarPathOptions,
} from "@pibbl/core";

const corners: RoundedCornerPathOptions = { cornerRadius: 6 };
const rectangle: RectanglePathOptions = {
  x: 12,
  y: 12,
  width: 100,
  height: 70,
  ...corners,
};
const polygon: PolygonPathOptions = {
  coords: [
    [130, 20],
    [190, 70],
    [130, 90],
  ],
  ...corners,
};
const position: RegularPolygonPathPosition = { sides: 6, cx: 70, cy: 150 };
const size: RegularPolygonNumericSize = { circumradius: 36 };
const hexagon: RegularPolygonPathOptions = { ...position, ...size, ...corners };
const star: StarPathOptions = {
  points: 5,
  cx: 160,
  cy: 150,
  innerRadius: 17,
  outerRadius: 38,
};
const paths: Path2D[] = [
  createRectanglePath(rectangle),
  createPolygonPath(polygon),
  createRegularPolygonPath(hexagon),
  createStarPath(star),
];
const canvas = document.createElement("canvas");
canvas.width = 220;
canvas.height = 220;
document.body.append(canvas);
const context = canvas.getContext("2d")!;
context.lineWidth = 3;
paths.forEach((path, index) => {
  context.strokeStyle = ["#0f766e", "#f97316", "#7c3aed", "#e11d48"][index];
  context.stroke(path);
});

```

## Usage notes

- Strokes every constructed Path2D on a local Canvas.

## Documentation version

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