Node / Lines Connectors · guide
Path2D — create, draw & command reference
Current Apexify.js 6.0.0 documentation for Path2D — create, draw & command reference.
painter.path2d (PainterPath2D facet):
| Method | Signature | Role |
|---|---|---|
create | (commands: PathCommand[]) => Path2D | buildPath2DFromCommands via appendPathCommands. |
draw | (canvasBuffer, path: Path2D | PathCommand[], options?) => Promise<Buffer> | Raster composite onto existing PNG (Path2DCreator.drawPath). |
custom | (options, canvasBuffer) | Styled connectors (previous chapters). |
Drawing pipeline (drawPath / drawPathOntoContext)
- Decode
canvasBufferdimensions. ctx.drawImagesnapshot →save().- Optional
transform(origin-centred rotation/scale or translate-first ordering — mirrorspath2d-creator). - Optional
shadow(colour or gradient viacreateGradientFill+gradientBounds). - Optional
stroke—stroke(path)with dash presets (dashed⇒[10,6],dotted⇒[2,5]) unlessdashArraysupplied. - Optional
fill—fill(path[, rule])(rulenonzero/evenodd). restore().
Opacity: root options.opacity clamps [0,1] and multiplies stroke/fill alphas independently (**per-channel multiply against stroke.opacity / fill.opacity).
Path2DDrawOptions quick reference
| Block | Fields |
|---|---|
stroke | color, gradient, width, lineCap, lineJoin, miterLimit, style (solid/dashed/dotted), dashArray, dashOffset, opacity |
fill | color, gradient, opacity, rule |
shadow | color, gradient, blur, offsetX, offsetY |
transform | translateX/Y, rotate, scaleX/Y, originX/Y |
| Root | opacity, globalCompositeOperation, gradientBounds (bbox for paints) |
PathCommand[] primitives
Commands append in order (foundation/path-cmd.ts):
type | Payload |
|---|---|
moveTo | x, y |
lineTo | x, y |
arc | x, y, radius, startAngle, endAngle, optional counterclockwise — angles radians (Canvas convention) |
arcTo | x1, y1, x2, y2, radius |
quadraticCurveTo | cpx, cpy, x, y |
bezierCurveTo | cp1x, cp1y, cp2x, cp2y, x, y |
rect | x, y, width, height |
ellipse | x, y, radiusX, radiusY, optional rotation, startAngle, endAngle, counterclockwise — angles radians |
closePath | closes current contour |
circle | x, y, radius (full circle) |
roundedRect | x, y, width, height, radius (number or { tl, tr, br, bl }) |
polygon | points — auto closePath |
star | x, y, outerRadius, innerRadius, points (tip count) |
arrow | x, y, length, angle (degrees), optional headLength, headAngle (degrees) |
Composite diagrams by interleaving moveTo segments so strokes don’t unintentionally close.
Example — rounded badge + arrow axis
SOURCEtypescript
typescript
Scenes
{ type: 'path', path: PathCommand[], options?: Path2DDrawOptions } paints via drawPathOntoContext with canvas width/height.