# Star
[Full-page experience](/experience/star/) · [Open playground](/playground/#/examples/drawing/star)

Alternate outer tips and inner valleys to draw a star with selective rounded corners.

## Try it

Compare the five-tip star with the selectively rounded seven-tip star.

## What to learn

- Set points plus outerRadius and innerRadius to define the alternating vertices.
- Round selected tips while preserving sharp valleys with cornerRadii.

## Integration boundaries

- A Star requires an integer point count of at least three and outerRadius at least as large as innerRadius.
- cornerRadii follows the generated tip-and-valley traversal order.

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

- [Star](/reference/components/star/)

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

### star.example.tsx

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

function StarStudy() {
  return [
    <Rectangle
      style={{ left: 0, top: 0, width: 720, height: 420, fill: "#17211d" }}
    />,
    <Star
      style={{
        points: 5,
        cx: 230,
        cy: 210,
        outerRadius: 148,
        innerRadius: 66,
        fill: "#f7c948",
        stroke: "#f7f0df",
        strokeWidth: 5,
      }}
    />,
    <Star
      style={{
        points: 7,
        cx: 500,
        cy: 210,
        outerRadius: 132,
        innerRadius: 58,
        rotation: Math.PI / 7,
        cornerRadii: [18, 0, 18, 0, 18, 0, 18, 0, 18, 0, 18, 0, 18, 0],
        fill: "#ff6b57",
        stroke: "#f7f0df",
        strokeWidth: 5,
      }}
    />,
  ];
}

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

```

## Documentation version

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