# Regular polygon
[Full-page experience](/experience/regular-polygon/) · [Open playground](/playground/#/examples/drawing/regular-polygon)

Generate a regular shape with equal sides and angles from a center and exactly one size mode.

## Try it

Compare the pentagon, hexagon, and square built from the three size modes.

## What to learn

- Choose circumradius, inradius, or sideLength as the one defining size.
- Rotate a regular polygon without manually calculating its vertices.

## Integration boundaries

- RegularPolygon accepts exactly one of circumradius, inradius, or sideLength.
- rotation is measured in radians from the default upward first vertex.

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

- [RegularPolygon](/reference/components/regular-polygon/)

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

### regular-polygon.example.tsx

```tsx
import {
  pibbl,
  Rectangle,
  RegularPolygon,
  type PibblController,
} from "@pibbl/core";

function RegularPolygonStudy() {
  return [
    <Rectangle
      style={{ left: 0, top: 0, width: 720, height: 420, fill: "#f7f0df" }}
    />,
    <RegularPolygon
      style={{
        sides: 5,
        cx: 150,
        cy: 210,
        circumradius: 112,
        fill: "#1f4bd8",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
    <RegularPolygon
      style={{
        sides: 6,
        cx: 360,
        cy: 210,
        inradius: 96,
        rotation: Math.PI / 6,
        fill: "#f7c948",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
    <RegularPolygon
      style={{
        sides: 4,
        cx: 570,
        cy: 210,
        sideLength: 138,
        rotation: Math.PI / 4,
        fill: "#74d3ae",
        stroke: "#17211d",
        strokeWidth: 5,
      }}
    />,
  ];
}

export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <RegularPolygonStudy />);
}

```

## Documentation version

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