Circular path factories

Run Stop Open full page

Read as Markdown

Create circle, ellipse, arc, and wedge Path2D shapes.

APIs demonstrated

• createArcPath from @pibbl/core
• createCirclePath from @pibbl/core
• createEllipsePath from @pibbl/core
• createWedgePath from @pibbl/core
• ArcPathOptions from @pibbl/core
• CirclePathOptions from @pibbl/core
• EllipsePathOptions from @pibbl/core
• WedgePathOptions 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 {
  createArcPath,
  createCirclePath,
  createEllipsePath,
  createWedgePath,
  type ArcPathOptions,
  type CirclePathOptions,
  type EllipsePathOptions,
  type WedgePathOptions,
} from "@pibbl/core";

const circleOptions: CirclePathOptions = { cx: 70, cy: 70, radius: 32 };
const ellipseOptions: EllipsePathOptions = {
  cx: 160,
  cy: 70,
  radiusX: 48,
  radiusY: 24,
};
const arcOptions: ArcPathOptions = {
  cx: 70,
  cy: 160,
  radius: 36,
  startAngle: 0,
  endAngle: Math.PI * 1.5,
};
const wedgeOptions: WedgePathOptions = {
  ...arcOptions,
  cx: 160,
  cy: 160,
};
const paths: Path2D[] = [
  createCirclePath(circleOptions),
  createEllipsePath(ellipseOptions),
  createArcPath(arcOptions),
  createWedgePath(wedgeOptions),
];
const canvas = document.createElement("canvas");
canvas.width = 240;
canvas.height = 220;
document.body.append(canvas);
const context = canvas.getContext("2d")!;
context.lineWidth = 3;
paths.forEach((path, index) => {
  context.strokeStyle = ["#0f766e", "#f97316", "#7c3aed", "#e11d48"][index];
  context.stroke(path);
});

Usage notes

• Strokes every constructed Path2D on a local Canvas.

Documentation version

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