Rectangle

Run exampleStopStopped

The complete example source and integration notes are available below.

Read as Markdown

Full-page experience · Open playground

Use rectangles as bold blocks of color, outlined frames, and precise layout anchors.

Try it

Hover the coral block to confirm its target area.

What to learn

• Declare rectangle geometry and paint inside one explicit style object.
• Combine fill, stroke, alpha, and pixel-grid alignment.

Integration boundaries

• A rectangle can be fill-only, stroke-only, or both.
• cornerRadius and cornerRadii round every corner or target individual corners without changing the rectangle’s box.
• Visual and layout values stay local under style; event handlers remain separate props.

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

• Rectangle

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.

rectangle.example.tsx

import { pibbl, useSignal, Rectangle, Text, type PibblController } from "@pibbl/core";
function RectangleStudy() {
  const hovered = useSignal(false);
  return [
    <Rectangle
      style={{
        left: 0,
        top: 0,
        width: 720,
        height: 420,
        fill: "#f7f0df",
      }}
    />,
    <Rectangle
      style={{
        left: 54,
        top: 52,
        width: 252,
        height: 316,
        fill: "#1f4bd8",
        cornerRadius: 28,
      }}
    />,
    <Rectangle
      style={{
        left: 268,
        top: 104,
        width: 280,
        height: 190,
        fill: hovered.get() ? "#74d3ae" : "#ff6b57",
        stroke: "#17211d",
        strokeWidth: 6,
        cursor: "crosshair",
        cornerRadii: [32, 8, 32, 8],
      }}
      onMouseOver={() => hovered.set(true)}
      onMouseOut={() => hovered.set(false)}
    />,
    <Rectangle
      style={{
        left: 534,
        top: 50,
        width: 132,
        height: 132,
        fill: "#f7c948",
        stroke: "#17211d",
        strokeWidth: 2,
        alignToPixelGrid: "round",
      }}
    />,
    <Rectangle
      style={{
        left: 406,
        top: 292,
        width: 260,
        height: 76,
        stroke: "#17211d",
        strokeWidth: 6,
      }}
    />,
    <Text
      style={{
        left: 536,
        top: 330,
        fill: "#17211d",
        font: "800 16px sans-serif",
        textAlign: "center",
        textBaseline: "middle",
      }}
    >
      {hovered.get() ? "TARGET FOUND" : "RECTANGLE STUDY"}
    </Text>,
  ];
}
export default function mount(canvas: HTMLCanvasElement): PibblController {
  return pibbl(canvas, <RectangleStudy />);
}

Documentation version

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