Path

Read as Markdown

Looking for ways to edit, bend, or warp a path? See PathGeometry: operations at a glance for the complete operation map, detailed references, and runnable examples.

import { Path } from "@pibbl/core";

Path uses PathProps and PathStyle. Its required d is a Path2D or PathGeometry; it rejects children. Reuse a path created with a public create*Path function or construct one with the browser API. Paint and coordinate targeting use the same path geometry.

<Path style={{ d: new Path2D("M10 10H110V70H10Z"), fill: "#38bdf8" }} />

Try the Path live example.

API details from source

Describes a Canvas path primitive for JSX or createElement authoring.

Path: PibblPrimitiveComponent<PathProps, PrimitiveInput<PathProps, PathStyle>>

Parameters

props — Authored component inputs, supplied through JSX or createElement. See the linked props and style types.

Throws

When called directly; Pibbl mounts this component through JSX or createElement.

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal example

Compile this TSX module with jsx: "react-jsx" and jsxImportSource: "@pibbl/core", then load it from a browser entry point after the document body exists. It creates and mounts one canvas; dispose the controller before removing or replacing that canvas. The interactive study linked below adds controls beyond this minimal use case.

Download source

/** @jsxImportSource @pibbl/core */
import { pibbl, Path } from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

const controller = pibbl(canvas, (
<Path style={{ d: new Path2D("M10 10H110V70H10Z"), fill: "#38bdf8" }} />
));

window.addEventListener('pagehide', () => controller.dispose(), { once: true });

Complete minimal examples

Lines and authored paths: Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. Plain source

Interactive examples

Documentation version

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