API reference

Every public class, method, and event in @codexo/exojs. Generated from source.

classGraphicsPath

@codexo/exojs / rendering / stable

A reusable 2D path: a sequence of subpaths built from lines, Bézier curves and arcs, kept as commands rather than as vertices. ```ts const arrow = new GraphicsPath().moveTo(0, 0).lineTo(40, 20).lineTo(0, 40).closePath(); graphics.fillColor = Color.white; graphics.drawShape(arrow); ``` Keeping the commands is what separates this from a list of points: the same path flattens to as many vertices as the size it is drawn at needs, so one path can back an icon and a full-screen backdrop without either being over-tessellated or visibly faceted. Pass the tolerance you need to contours; the default suits drawing at roughly one path unit per pixel. A path is a value, not a scene node. It holds no GPU resources, needs no disposal, and can be shared between any number of Graphics instances and drawn any number of times. This is not the same thing as Graphics's own `moveTo`/`lineTo` cursor, which draws each segment the moment it is called and gives every segment its own mesh. A path is assembled first and drawn as one shape, so it can be filled, joined across segments, and kept for later.

props

methods

events

Import

import { GraphicsPath } from '@codexo/exojs'

A reusable 2D path: a sequence of subpaths built from lines, Bézier curves and arcs, kept as commands rather than as vertices.

```ts const arrow = new GraphicsPath().moveTo(0, 0).lineTo(40, 20).lineTo(0, 40).closePath();

graphics.fillColor = Color.white; graphics.drawShape(arrow); ```

Keeping the commands is what separates this from a list of points: the same path flattens to as many vertices as the size it is drawn at needs, so one path can back an icon and a full-screen backdrop without either being over-tessellated or visibly faceted. Pass the tolerance you need to contours; the default suits drawing at roughly one path unit per pixel.

A path is a value, not a scene node. It holds no GPU resources, needs no disposal, and can be shared between any number of Graphics instances and drawn any number of times.

This is not the same thing as Graphics's own `moveTo`/`lineTo` cursor, which draws each segment the moment it is called and gives every segment its own mesh. A path is assembled first and drawn as one shape, so it can be filled, joined across segments, and kept for later.

Constructors1

new(): GraphicsPath

Methods14

arc(centerX: number, centerY: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean): this

Extend the current subpath with a circular arc, preceded by a straight segment from the current point to the arc's start where the two differ. Angles are in radians and anticlockwise reverses the sweep direction. Starts a new subpath when the path is empty, so an arc can open one.

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this

Extend the current subpath with an arc of radius tangent to the lines current point → (x1, y1) and (x1, y1) → (x2, y2), the corner rounding used for rounded polygons. Degenerate input - a zero radius, repeated points, or a corner too tight for the radius - falls back to a straight segment to (x1, y1).

bezierCurveTo(cpX1: number, cpY1: number, cpX2: number, cpY2: number, x: number, y: number): this

Extend the current subpath with a cubic Bézier curve through two control points.

circle(centerX: number, centerY: number, radius: number): this

Add a closed circular subpath.

clear(): this

Discard every command, leaving the path as newly constructed.

clone(): GraphicsPath

An independent copy holding the same commands.

closePath(): this

Close the current subpath and return the cursor to where that subpath began.

contours(tolerance: number): readonly PathContourOne flattened subpath produced by GraphicsPath.contours.[]

Flatten the path into polylines, one per subpath. tolerance is the largest distance, in the path's own units, that a flattened edge may deviate from the true curve. Smaller values produce more vertices: halving it roughly doubles the vertex count of a curve. Pass the path unit size in device pixels to keep curves smooth on a scaled-up path. Subpaths of fewer than two points are dropped, and so is the closing vertex of a closed subpath that merely repeats its first.

ellipse(centerX: number, centerY: number, radiusX: number, radiusY: number): this

Add a closed axis-aligned elliptical subpath. Approximated by four cubic Bézier quadrants, which stays within the flattening tolerance for every radius ratio.

lineTo(x: number, y: number): this

Extend the current subpath with a straight segment to (x, y).

moveTo(x: number, y: number): this

Begin a new subpath at (x, y).

quadraticCurveTo(cpX: number, cpY: number, x: number, y: number): this

Extend the current subpath with a quadratic Bézier curve through control point (cpX, cpY).

rect(x: number, y: number, width: number, height: number): this

Add a closed rectangular subpath.

roundedRect(x: number, y: number, width: number, height: number, radius: number): this

Add a closed rounded-rectangle subpath. The radius is clamped to half the shorter side; a clamped radius of zero gives a plain rect.

Properties3

currentX: number

X of the point the next segment starts from.

currentY: number

Y of the point the next segment starts from.

isEmpty: boolean

Whether any command has been recorded.

Source

src/rendering/primitives/GraphicsPath.ts