Skip to content

Circle

Read as Markdown

import { pibbl, createElement, Circle } from "@pibbl/core";
const controller = pibbl(
document.querySelector("canvas"),
createElement(Circle, {
style: { cx: 150, cy: 100, radius: 60, fill: "#267d7c" },
}),
);
// controller.dispose() when the host is removed.

Use a canvas with width="600" height="200" for this example. radius is required; cx and cy default to zero. Percentage radii use the smaller available axis. Circle rejects children. The same logical geometry determines paint and coordinate targeting; filters do not enlarge it.

Use style.fill and style.stroke for paint. Set pointerEvents: 'none' for decorative paint. A Canvas circle is not an accessible native button.

Related types are CircleProps and CircleStyle, available through the public declarations. See the visual entry and editable example.

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