Rounded and circular marks

Run Stop Open full page

Read as Markdown

Draw a circle, ellipse, rounded rectangle, arc, and wedge with typed props and styles.

APIs demonstrated

• Arc from @pibbl/core
• ArcProps from @pibbl/core
• ArcStyle from @pibbl/core
• Circle from @pibbl/core
• CircleProps from @pibbl/core
• CircleStyle from @pibbl/core
• CursorStyle from @pibbl/core
• FillStyle from @pibbl/core
• PaintStyle from @pibbl/core
• Ellipse from @pibbl/core
• EllipseProps from @pibbl/core
• EllipseStyle from @pibbl/core
• Rectangle from @pibbl/core
• RectangleProps from @pibbl/core
• RectStyle from @pibbl/core
• RoundedCornerStyle from @pibbl/core
• StrokeStyle from @pibbl/core
• Wedge from @pibbl/core
• WedgeProps from @pibbl/core
• WedgeStyle from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

import {
  Arc,
  Circle,
  Ellipse,
  Rectangle,
  Wedge,
  pibbl,
  type ArcProps,
  type ArcStyle,
  type CircleProps,
  type CircleStyle,
  type EllipseProps,
  type EllipseStyle,
  type CursorStyle,
  type FillStyle,
  type PaintStyle,
  type RectangleProps,
  type RectStyle,
  type RoundedCornerStyle,
  type StrokeStyle,
  type WedgeProps,
  type WedgeStyle,
} from "@pibbl/core";

const fill: FillStyle = "#0f766e";
const stroke: StrokeStyle = "#134e4a";
const paint: PaintStyle = { fill, stroke, strokeWidth: 2 };
const cursor: CursorStyle = { cursor: "pointer" };
const corners: RoundedCornerStyle = { cornerRadius: 8 };
const circleProps: CircleProps = { pointerEvents: "auto" };
const circleStyle: CircleStyle = {
  cx: 70,
  cy: 75,
  radius: 35,
  ...paint,
  ...cursor,
};
const ellipseProps: EllipseProps = { pointerEvents: "auto" };
const ellipseStyle: EllipseStyle = {
  cx: 170,
  cy: 75,
  radiusX: 50,
  radiusY: 24,
  fill: "#f97316",
};
const rectProps: RectangleProps = { pointerEvents: "auto" };
const rectStyle: RectStyle = {
  left: 15,
  top: 135,
  width: 90,
  height: 55,
  ...corners,
  fill: "#e11d48",
};
const arcProps: ArcProps = { pointerEvents: "auto" };
const arcStyle: ArcStyle = {
  cx: 160,
  cy: 155,
  radius: 35,
  startAngle: Math.PI,
  endAngle: Math.PI * 2,
  stroke: "#0f766e",
  strokeWidth: 6,
};
const wedgeProps: WedgeProps = { pointerEvents: "auto" };
const wedgeStyle: WedgeStyle = {
  cx: 270,
  cy: 155,
  radius: 38,
  startAngle: 0,
  endAngle: Math.PI * 1.3,
  fill: "#7c3aed",
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <>
    <Circle {...circleProps} style={circleStyle} />
    <Ellipse {...ellipseProps} style={ellipseStyle} />
    <Rectangle {...rectProps} style={rectStyle} />
    <Arc {...arcProps} style={arcStyle} />
    <Wedge {...wedgeProps} style={wedgeStyle} />
  </>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

Usage notes

• Creates its own canvas and disposes the Pibbl mount on pagehide.

Documentation version

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