Polygon

Run exampleStopStopped

The complete example source and integration notes are available below.

Read as Markdown

Full-page experience · Open playground

Close ordered coordinate pairs into a filled, outlined multi-sided mark.

Try it

Click the amber polygon to turn it teal.

What to learn

• Connect finite coordinate pairs into a closed polygon.
• Use the closed interior as a direct click target.

Integration boundaries

• Polygon closes the final point back to the first point automatically.
• cornerRadius rounds each polygon vertex while keeping the original coordinate extrema.
• At least three finite coordinates are required to paint geometry.

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

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

polygon.example.tsx

import { pibbl, useSignal, Polygon, Rectangle, type PibblController } from "@pibbl/core";

function PolygonStudy() {
  const active = useSignal(false);

  return [
    <Rectangle
      style={{ left: 0, top: 0, width: 720, height: 420, fill: "#f7f0df" }}
    />,
    <Polygon
      style={{
        coords: [
          [360, 72],
          [500, 174],
          [446, 338],
          [274, 338],
          [220, 174],
        ],
        fill: active.get() ? "#14b8a6" : "#f59e0b",
        stroke: "#17211d",
        strokeWidth: 6,
        cornerRadius: 18,
        cursor: "pointer",
      }}
      onClick={() => active.update((value) => !value)}
    />,
  ];
}

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

Documentation version

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