# Path2D >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. **Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. ## addPath addPath\(path: Object\): void Adds a path to this path. - Parameters

Name

Type

Mandatory

Default Value

Description

path

Object

Yes

null

Path to be added to this path.
- Example ``` @Entry @Component struct AddPath { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z") private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.addPath(this.path2Da) this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001192595216.png) ## closePath closePath\(\): void Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape is closed or has only one point, this method does not perform any action. - Example ``` @Entry @Component struct ClosePath { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.moveTo(200, 100) this.path2Db.lineTo(300, 100) this.path2Db.lineTo(200, 200) this.path2Db.closePath() this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/unnaming-(4).png) ## moveTo moveTo\(x: number, y: number\): void Moves the current coordinate point of the path to the target point, without drawing a line during the movement. - Parameters

Name

Type

Mandatory

Default Value

Description

x

number

Yes

0

X-coordinate of the target point.

y

number

Yes

0

Y-coordinate of the target point.
- Example ``` @Entry @Component struct MoveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.moveTo(50, 100) this.path2Db.lineTo(250, 100) this.path2Db.lineTo(150, 200) this.path2Db.closePath() this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001237475113.png) ## lineTo lineTo\(x: number, y: number\): void Draws a straight line from the current point to the target point. - Parameters

Name

Type

Mandatory

Default Value

Description

x

number

Yes

0

X-coordinate of the target point.

y

number

Yes

0

Y-coordinate of the target point.
- Example ``` @Entry @Component struct LineTo { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.moveTo(100, 100) this.path2Db.lineTo(100, 200) this.path2Db.lineTo(200, 200) this.path2Db.lineTo(200, 100) this.path2Db.closePath() this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/unnaming-(3).png) ## bezierCurveTo bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number\): void Draws a cubic bezier curve on the canvas. - Parameters

Name

Type

Mandatory

Default Value

Description

cp1x

number

Yes

0

X-coordinate of the first parameter of the bezier curve.

cp1y

number

Yes

0

Y-coordinate of the first parameter of the bezier curve.

cp2x

number

Yes

0

X-coordinate of the second parameter of the bezier curve.

cp2y

number

Yes

0

Y-coordinate of the second parameter of the bezier curve.

x

number

Yes

0

X-coordinate of the end point on the bezier curve.

y

number

Yes

0

Y-coordinate of the end point on the bezier curve.
- Example ``` @Entry @Component struct BezierCurveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.moveTo(10, 10) this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001192915158.png) ## quadraticCurveTo quadraticCurveTo\(cpx: number, cpy: number, x: number ,y: number\): void Draws a quadratic curve on the canvas. - Parameters

Name

Type

Mandatory

Default Value

Description

cpx

number

Yes

0

X-coordinate of the bezier curve parameter.

cpy

number

Yes

0

Y-coordinate of the bezier curve parameter.

x

number

Yes

0

X-coordinate of the end point on the bezier curve.

y

number

Yes

0

Y-coordinate of the end point on the bezier curve.
- Example ``` @Entry @Component struct QuadraticCurveTo { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.moveTo(10, 10) this.path2Db.quadraticCurveTo(100, 100, 200, 20) this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001237555151.png) ## arc arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: number\): void Draws an arc on the canvas. - Parameters

Name

Type

Mandatory

Default Value

Description

x

number

Yes

0

X-coordinate of the center point of the arc.

y

number

Yes

0

Y-coordinate of the center point of the arc.

radius

number

Yes

0

Radius of the arc.

startAngle

number

Yes

0

Start radian of the arc.

endAngle

number

Yes

0

End radian of the arc.

anticlockwise

boolean

No

false

Whether to draw the arc counterclockwise.
- Example ``` @Entry @Component struct Arc { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001192595214.png) ## arcTo arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void Draws an arc based on the radius and points on the arc. - Parameters

Name

Type

Mandatory

Default Value

Description

x1

number

Yes

0

X-coordinate of the first point on the arc.

y1

number

Yes

0

Y-coordinate of the first point on the arc.

x2

number

Yes

0

X-coordinate of the second point on the arc.

y2

number

Yes

0

Y-coordinate of the second point on the arc.

radius

number

Yes

0

Radius of the arc.
- Example ``` @Entry @Component struct ArcTo { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.arcTo(150, 20, 150, 70, 50) this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001192755172.png) ## ellipse ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number\): void Draws an ellipse in the specified rectangular region. - Parameters

Name

Type

Mandatory

Default Value

Description

x

number

Yes

0

X-coordinate of the ellipse center.

y

number

Yes

0

Y-coordinate of the ellipse center.

radiusX

number

Yes

0

Ellipse radius on the x-axis.

radiusY

number

Yes

0

Ellipse radius on the y-axis.

rotation

number

Yes

0

Rotation angle of the ellipse, in radians.

startAngle

number

Yes

0

Angle of the start point for drawing the ellipse, in radians.

endAngle

number

Yes

0

Angle of the end point for drawing the ellipse, in radians.

anticlockwise

number

No

0

Whether to draw the ellipse in the counterclockwise direction. The value 0 means to draw the ellipse in the clockwise direction, and 1 means to draw the ellipse in the counterclockwise direction. This parameter is optional. The default value is 0.
- Example ``` @Entry @Component struct Ellipse { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true) this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001193075154.png) ## rect rect\(x: number, y: number, width: number, height: number\): void Creates a rectangle. - Parameters

Name

Type

Mandatory

Default Value

Description

x

number

Yes

0

X-coordinate of the upper left corner of the rectangle.

y

number

Yes

0

Y-coordinate of the upper left corner of the rectangle.

width

number

Yes

0

Width of the rectangle.

height

number

Yes

0

Height of the rectangle.
- Example ``` @Entry @Component struct Rect { private settings: RenderingContextSettings = new RenderingContextSettings(true,true) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private path2Db: Path2D = new Path2D() build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') .height('100%') .backgroundColor('#ffff00') .onReady(() =>{ this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db) }) } .width('100%') .height('100%') } } ``` ![](figures/en-us_image_0000001192755174.png)