Skip to main content

PathDataBuilder

class PathDataBuilder

A builder for constructing SVG path data strings.

This class provides a fluent API for building SVG path data, which can be used to create Path2D objects or passed to other renderers like Rough.js.

Examples

Constructors​

constructor​

public new PathDataBuilder(): PathDataBuilder

Methods​

arc​

public arcx: numbery: numberradius: numberstartAngle: numberendAngle: numbercounterclockwise: boolean = false: this

Draw a circular arc using the arc command.

This is a convenience method that calls ellipse with equal radii.

Parameters

  • x: number

    Center x coordinate

  • y: number

    Center y coordinate

  • radius: number

    Arc radius

  • startAngle: number

    Start angle in radians

  • endAngle: number

    End angle in radians

  • counterclockwise: boolean = false

    Whether to draw counterclockwise

arcTo​

public arcTox1: numbery1: numberx2: numbery2: numberradius: number: this

Draw an arc to a point with a given radius.

This matches the Canvas API's arcTo method. It draws a straight line from the current point to the start of an arc, then draws an arc with the given radius that is tangent to the line from the current point to (x1, y1) and the line from (x1, y1) to (x2, y2).

Parameters

  • x1: number

    First control point x

  • y1: number

    First control point y

  • x2: number

    Second control point x

  • y2: number

    Second control point y

  • radius: number

    Arc radius

bezierCurveTo​

public bezierCurveTocp1x: numbercp1y: numbercp2x: numbercp2y: numberx: numbery: number: this

Draw a cubic Bezier curve.

Parameters

  • cp1x: number

    First control point x

  • cp1y: number

    First control point y

  • cp2x: number

    Second control point x

  • cp2y: number

    Second control point y

  • x: number

    End point x

  • y: number

    End point y

clear​

public clear(): this

Reset the builder to empty state.

closePath​

public closePath(): this

Close the current path.

ellipse​

public ellipsex: numbery: numberradiusX: numberradiusY: numberrotation: numberstartAngle: numberendAngle: numbercounterclockwise: boolean = false: this

Draw an elliptical arc.

Converts canvas ellipse parameters to SVG arc commands. For full ellipses, this generates two arc commands to work around SVG's limitation of 180-degree maximum arc sweeps.

Parameters

  • x: number

    Center x coordinate

  • y: number

    Center y coordinate

  • radiusX: number

    Horizontal radius

  • radiusY: number

    Vertical radius

  • rotation: number

    Rotation angle in radians

  • startAngle: number

    Start angle in radians

  • endAngle: number

    End angle in radians

  • counterclockwise: boolean = false

    Whether to draw counterclockwise

lineTo​

public lineTox: numbery: number: this

Draw a line to a point.

Parameters

  • x: number

    The x coordinate

  • y: number

    The y coordinate

moveTo​

public moveTox: numbery: number: this

Move to a point without drawing.

Parameters

  • x: number

    The x coordinate

  • y: number

    The y coordinate

quadraticCurveTo​

public quadraticCurveTocpx: numbercpy: numberx: numbery: number: this

Draw a quadratic Bezier curve.

Parameters

  • cpx: number

    Control point x

  • cpy: number

    Control point y

  • x: number

    End point x

  • y: number

    End point y

toString​

public toString(): string

Get the SVG path data string.