Class Path2D

constructor

• new Path2D(svgPath): Path2D

• Parameters

  • svgPath: any

  Returns Path2D

arcResolution

5
Copy

isDirty

points

startPoint

vertices

arc

• arc(x, y, radius, startAngle, endAngle, anticlockwise?): void

• adds an arc to the current path which is centered at (x, y) position with the given radius, starting at startAngle and ending at endAngle going in the given direction by counterclockwise (defaulting to clockwise).

  Parameters

  • x: number

    the horizontal coordinate of the arc's center.
  • y: number

    the vertical coordinate of the arc's center.
  • radius: number

    the arc's radius. Must be positive.
  • startAngle: number

    the angle at which the arc starts in radians, measured from the positive x-axis.
  • endAngle: number

    the angle at which the arc ends in radians, measured from the positive x-axis.
  • Optionalanticlockwise: boolean = false

    an optional boolean value. If true, draws the arc counter-clockwise between the start and end angles.

  Returns void

arcTo

• arcTo(x1, y1, x2, y2, radius): void

• adds a circular arc to the path with the given control points and radius, connected to the previous point by a straight line.

  Parameters

  • x1: number

    the x-axis coordinate of the first control point.
  • y1: number

    the y-axis coordinate of the first control point.
  • x2: number

    the x-axis coordinate of the second control point.
  • y2: number

    the y-axis coordinate of the second control point.
  • radius: number

    the arc's radius. Must be positive.

  Returns void

beginPath

• beginPath(): void

• begin a new path

  Returns void

bezierCurveTo

• bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y): void

• Adds a cubic Bézier curve to the path.

  Parameters

  • cp1X: number

    The x-coordinate of the first control point.
  • cp1Y: number

    The y-coordinate of the first control point.
  • cp2X: number

    The x-coordinate of the second control point.
  • cp2Y: number

    The y-coordinate of the second control point.
  • x: number

    The x-coordinate of the end point of the curve.
  • y: number

    The y-coordinate of the end point of the curve.

  Returns void

closePath

• closePath(): void

• causes the point of the pen to move back to the start of the current path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

  Returns void

ellipse

• ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise?): void

• adds an elliptical arc to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by counterclockwise.

  Parameters

  • x: number

    the x-axis (horizontal) coordinate of the ellipse's center.
  • y: number

    the y-axis (vertical) coordinate of the ellipse's center.
  • radiusX: number

    the ellipse's major-axis radius. Must be non-negative.
  • radiusY: number

    the ellipse's minor-axis radius. Must be non-negative.
  • rotation: number

    the rotation of the ellipse, expressed in radians.
  • startAngle: number

    the angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians.
  • endAngle: number

    the angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians.
  • Optionalanticlockwise: boolean = false

    an optional boolean value which, if true, draws the ellipse counterclockwise (anticlockwise).

  Returns void

lineTo

• lineTo(x, y): void

• connects the last point in the current path to the (x, y) coordinates with a straight line.

  Parameters

  • x: number

    the x-axis coordinate of the line's end point.
  • y: number

    the y-axis coordinate of the line's end point.

  Returns void

moveTo

• moveTo(x, y): void

• moves the starting point of the current path to the (x, y) coordinates.

  Parameters

  • x: number

    the x-axis (horizontal) coordinate of the point.
  • y: number

    the y-axis (vertical) coordinate of the point.

  Returns void

parseSVGPath

• parseSVGPath(svgPath): void

• Parses an SVG path string and adds the points to the current path.

  Parameters

  • svgPath: string

    The SVG path string to parse.

  Returns void

quadraticCurveTo

• quadraticCurveTo(cpX, cpY, x, y): void

• Adds a quadratic Bézier curve to the path.

  Parameters

  • cpX: number

    The x-coordinate of the control point.
  • cpY: number

    The y-coordinate of the control point.
  • x: number

    The x-coordinate of the end point of the curve.
  • y: number

    The y-coordinate of the end point of the curve.

  Returns void

rect

• rect(x, y, width, height): void

• creates a path for a rectangle at position (x, y) with a size that is determined by width and height.

  Parameters

  • x: number

    the x-axis coordinate of the rectangle's starting point.
  • y: number

    the y-axis coordinate of the rectangle's starting point.
  • width: number

    the rectangle's width. Positive values are to the right, and negative to the left.
  • height: number

    the rectangle's height. Positive values are down, and negative are up.

  Returns void

roundRect

• roundRect(x, y, width, height, radius): void

• adds an rounded rectangle to the current path.

  Parameters

  • x: number

    the x-axis coordinate of the rectangle's starting point.
  • y: number

    the y-axis coordinate of the rectangle's starting point.
  • width: number

    the rectangle's width. Positive values are to the right, and negative to the left.
  • height: number

    the rectangle's height. Positive values are down, and negative are up.
  • radius: number

    the arc's radius to draw the borders. Must be positive.

  Returns void

triangulatePath

• triangulatePath(): Point[]

• triangulate the shape defined by this path into an array of triangles

  Returns Point[]

  an array of vertices representing the triangulated path or shape