Path2D

Path2D allows you to describe a path through an existing path. This path can be drawn through the stroke or fill API of Canvas.

NOTE

The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

addPath

addPath(path: path2D, transform?:Matrix2D): void

Adds a path to this path.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Default Value	Description
path	path2D	Yes	-	Path to be added to this path. Unit: px.
transform	Matrix2D	No	null	Transformation matrix of the new path.

Example

// xxx.ets
@Entry
@Component
struct AddPath {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001211898520

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 has already been closed or has only one point, this method does nothing.

Since API version 9, this API is supported in ArkTS widgets.

Example

// xxx.ets
@Entry
@Component
struct ClosePath {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001212218482

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.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X coordinate of the target point, in vp.
y	number	Yes	0	Y coordinate of the target point, in vp.

Example

// xxx.ets
@Entry
@Component
struct MoveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001257138389

lineTo

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

Draws a straight line from the current point to the target point.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X coordinate of the target point, in vp.
y	number	Yes	0	Y coordinate of the target point, in vp.

Example

// xxx.ets
@Entry
@Component
struct LineTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001256858435

bezierCurveTo

bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void

Draws a cubic Bezier curve on the canvas.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Description
cp1x	number	Yes	X coordinate of the first parameter of the Bezier curve, in vp.
cp1y	number	Yes	Y coordinate of the first parameter of the Bezier curve, in vp.
cp2x	number	Yes	X coordinate of the second parameter of the Bezier curve, in vp.
cp2y	number	Yes	Y coordinate of the second parameter of the Bezier curve, in vp.
x	number	Yes	X coordinate of the end point on the Bezier curve, in vp.
y	number	Yes	Y coordinate of the end point on the Bezier curve, in vp.

Example

// xxx.ets
@Entry
@Component
struct BezierCurveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001257058445

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void

Draws a quadratic curve on the canvas.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Description
cpx	number	Yes	X coordinate of the Bezier curve parameter, in vp.
cpy	number	Yes	Y coordinate of the Bezier curve parameter, in vp.
x	number	Yes	X coordinate of the end point on the Bezier curve, in vp.
y	number	Yes	Y coordinate of the end point on the Bezier curve, in vp.

Example

// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001212058512

arc

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

Draws an arc on the canvas.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X coordinate of the center point of the arc, in vp.
y	number	Yes	0	Y coordinate of the center point of the arc, in vp.
radius	number	Yes	0	Radius of the arc, in vp.
startAngle	number	Yes	0	Start radian of the arc.
endAngle	number	Yes	0	End radian of the arc.
counterclockwise	boolean	No	false	Whether to draw the arc counterclockwise.

Example

// xxx.ets
@Entry
@Component
struct Arc {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001212378446

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.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Description
x1	number	Yes	X coordinate of the first point on the arc, in vp.
y1	number	Yes	Y coordinate of the first point on the arc, in vp.
x2	number	Yes	X coordinate of the second point on the arc, in vp.
y2	number	Yes	Y coordinate of the second point on the arc, in vp.
radius	number	Yes	Radius of the arc, in vp.

Example

// xxx.ets
@Entry
@Component
struct ArcTo {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001212058510

ellipse

ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void

Draws an ellipse in the specified rectangular region on the canvas.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Default Value	Description
x	number	Yes	0	X coordinate of the ellipse center, in vp.
y	number	Yes	0	Y coordinate of the ellipse center, in vp.
radiusX	number	Yes	0	Ellipse radius on the x-axis, in vp.
radiusY	number	Yes	0	Ellipse radius on the y-axis, in vp.
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.
counterclockwise	boolean	No	false	Whether to draw the ellipse counterclockwise. true: Draw the ellipse counterclockwise. false: Draw the ellipse clockwise.

Example

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(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, 0, Math.PI * 1, Math.PI*2)
          this.context.stroke(this.path2Db)
        })
    }
    .width('100%')
    .height('100%')
  }
}

en-us_image_0000001257138391

rect

rect(x: number, y: number, w: number, h: number): void

Creates a rectangle on the canvas.

Since API version 9, this API is supported in ArkTS widgets.

Parameters

Name	Type	Mandatory	Description
x	number	Yes	X coordinate of the upper left corner of the rectangle, in vp.
y	number	Yes	Y coordinate of the upper left corner of the rectangle, in vp.
w	number	Yes	Width of the rectangle, in vp.
h	number	Yes	Height of the rectangle, in vp.

Example

// xxx.ets
@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(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%')
  }
}

en-us_image_0000001256978385