From f5a4d7d597fbe035bdea4236b30ea7e5ed37df74 Mon Sep 17 00:00:00 2001
From: "ester.zhou" <ester.zhou@huawei.com>
Date: Mon, 8 May 2023 14:21:21 +0800
Subject: [PATCH] Update docs (16235) Signed-off-by: ester.zhou
 <ester.zhou@huawei.com>

---
 .../figures/en-us_image_0000001239032420.png  | Bin 0 -> 5876 bytes
 .../arkui-ts/ts-canvasrenderingcontext2d.md   | 376 ++++++++----
 .../ts-components-canvas-canvasgradient.md    |   2 +-
 .../ts-components-canvas-imagedata.md         |  42 +-
 .../arkui-ts/ts-components-canvas-path2d.md   | 120 ++--
 .../ts-offscreencanvasrenderingcontext2d.md   | 573 +++++++++++-------
 6 files changed, 706 insertions(+), 407 deletions(-)
 create mode 100644 en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032420.png

diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032420.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001239032420.png
new file mode 100644
index 0000000000000000000000000000000000000000..faf9e54e927094688fc3d086903d27cc895760f1
GIT binary patch
literal 5876
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
F{{WhENnrp0

literal 0
HcmV?d00001

diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 765bafdcd9..6f899761e3 100644
--- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -12,6 +12,8 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
 
 CanvasRenderingContext2D(setting: RenderingContextSetting)
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type                                    | Mandatory  | Description                                    |
@@ -25,34 +27,36 @@ RenderingContextSettings(antialias?: boolean)
 
 Configures the settings of a **CanvasRenderingContext2D** object, including whether to enable antialiasing.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type   | Mandatory  | Description                         |
 | --------- | ------- | ---- | ----------------------------- |
-| antialias | boolean | No   | Whether to enable antialiasing.<br>Default value: **false** |
+| antialias | boolean | No   | Whether to enable antialiasing.<br>Default value: **false**|
 
 
 ## Attributes
 
 | Name                                                 | Type                                                        | Description                                                        |
 | ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| [fillStyle](#fillstyle)                               | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
+| [fillStyle](#fillstyle)                               | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is number, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [lineWidth](#linewidth)                               | number                                                       | Line width.                                        |
-| [strokeStyle](#strokestyle)                           | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.|
-| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**|
-| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**|
-| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**|
-| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**|
-| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**|
-| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**|
-| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.                |
-| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>Default value: **0.0**     |
-| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**|
-| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**|
-| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.                                  |
-| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.                      |
-| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.                      |
-| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**|
+| [strokeStyle](#strokestyle)                           | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is number, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 > **NOTE**
 >
@@ -77,7 +81,7 @@ struct FillStyleExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.context.fillStyle = '#0000ff'
-          this.context.fillRect(20, 160, 150, 100)
+          this.context.fillRect(20, 20, 150, 100)
         })
     }
     .width('100%')
@@ -657,6 +661,8 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type    | Mandatory  | Default Value | Description           |
@@ -701,6 +707,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 Draws an outlined rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description          |
@@ -745,6 +753,8 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description           |
@@ -791,6 +801,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
 
 Draws filled text on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type  | Mandatory| Default Value| Description                         |
@@ -836,6 +848,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
 
 Draws a text stroke on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type  | Mandatory| Default Value| Description                         |
@@ -881,6 +895,8 @@ measureText(text: string): TextMetrics
 
 Measures the specified text to obtain its width. This API returns a **TextMetrics** object.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name| Type  | Mandatory| Default Value| Description                |
@@ -889,9 +905,9 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
 
 **Return value**
 
-| Type       | Description            |
-| ----------- | ---------------- |
-| TextMetrics | **TextMetrics** object.|
+| Type       | Description                                                        |
+| ----------- | ------------------------------------------------------------ |
+| TextMetrics | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 **TextMetrics**
 
@@ -951,6 +967,8 @@ stroke(path?: Path2D): void
 
 Strokes a path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type                                      | Mandatory  | Default Value | Description          |
@@ -997,6 +1015,8 @@ beginPath(): void
 
 Creates a drawing path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Example**
 
   ```ts
@@ -1037,6 +1057,8 @@ moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description       |
@@ -1082,6 +1104,8 @@ lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description       |
@@ -1127,6 +1151,8 @@ closePath(): void
 
 Draws a closed path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Example**
 
   ```ts
@@ -1167,12 +1193,14 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type                                              | Mandatory| Description                                                        |
 | ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes  | Source image. For details, see **ImageBitmap**.                         |
-| repetition | string                                             | Yes  | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, or **'no-repeat'**.<br>Default value: **''**|
+| repetition | string                                             | Yes  | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.<br>Default value: **''**|
 
 **Return value**
 
@@ -1218,6 +1246,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description            |
@@ -1267,6 +1297,8 @@ 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  | Default Value | Description         |
@@ -1314,6 +1346,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 Draws an arc on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name              | Type     | Mandatory  | Default Value  | Description        |
@@ -1362,6 +1396,8 @@ 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  | Default Value | Description             |
@@ -1409,6 +1445,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 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               |
@@ -1459,6 +1497,8 @@ 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  | Default Value | Description           |
@@ -1504,6 +1544,8 @@ fill(fillRule?: CanvasFillRule): void
 
 Fills the area inside a closed path on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1545,6 +1587,8 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void
 
 Fills the area inside a closed path on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1598,6 +1642,8 @@ clip(fillRule?: CanvasFillRule): void
 
 Sets the current path to a clipping area.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1641,6 +1687,8 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
 
 Sets the current path to a clipping path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1653,35 +1701,35 @@ Sets the current path to a clipping path.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Clip {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          let region = new Path2D()
-          region.moveTo(30, 90)
-          region.lineTo(110, 20)
-          region.lineTo(240, 130)
-          region.lineTo(60, 130)
-          region.lineTo(190, 20)
-          region.lineTo(270, 90)
-          region.closePath()
-          this.context.clip(region,"evenodd")
-          this.context.fillStyle = "rgb(0,255,0)"
-          this.context.fillRect(0, 0, this.context.width, this.context.height)
-        })
+  @Entry
+  @Component
+  struct Clip {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let region = new Path2D()
+            region.moveTo(30, 90)
+            region.lineTo(110, 20)
+            region.lineTo(240, 130)
+            region.lineTo(60, 130)
+            region.lineTo(190, 20)
+            region.lineTo(270, 90)
+            region.closePath()
+            this.context.clip(region,"evenodd")
+            this.context.fillStyle = "rgb(0,255,0)"
+            this.context.fillRect(0, 0, this.context.width, this.context.height)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
   ![en-us_image_000000127777779](figures/en-us_image_000000127777779.png)
@@ -1693,6 +1741,8 @@ filter(filter: string): void
 
 Provides filter effects. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type    | Mandatory  | Default Value | Description          |
@@ -1706,6 +1756,8 @@ getTransform(): Matrix2D
 
 Obtains the current transformation matrix being applied to the context. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### resetTransform
 
@@ -1713,6 +1765,8 @@ resetTransform(): void
 
 Resets the current transform to the identity matrix. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### direction
 
@@ -1720,6 +1774,8 @@ direction(direction: CanvasDirection): void
 
 Sets the current text direction used to draw text. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### rotate
 
@@ -1727,6 +1783,8 @@ rotate(angle: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name   | Type    | Mandatory  | Default Value | Description                                      |
@@ -1769,6 +1827,8 @@ scale(x: number, y: number): void
 
 Scales the canvas based on the given scale factors.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description         |
@@ -1814,6 +1874,8 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 > **NOTE**
 >
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
@@ -1875,6 +1937,8 @@ setTransform(a: number, b: number, c: number, d: number, e: number, f: number):
 
 Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description                  |
@@ -1932,6 +1996,8 @@ translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description      |
@@ -1980,7 +2046,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
 
 Draws an image on the canvas.
 
-Since API version 9, this API is supported in ArkTS widgets.
+Since API version 9, this API is supported in ArkTS widgets, except that **PixelMap** objects are not supported.
 
 **Parameters**
 
@@ -2033,6 +2099,8 @@ createImageData(sw: number, sh: number): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value  | Description           |
@@ -2045,6 +2113,8 @@ createImageData(imageData: ImageData): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name       | Type                                      | Mandatory  | Default Value  | Description               |
@@ -2085,6 +2155,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
 Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description             |
@@ -2105,29 +2177,29 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+  @Entry
+  @Component
+  struct GetImageData {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.context.drawImage(this.img,0,0,130,130)
-          var imagedata = this.context.getImageData(50,50,130,130)
-          this.context.putImageData(imagedata,150,150)
-        })
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.drawImage(this.img,0,0,130,130)
+            var imagedata = this.context.getImageData(50,50,130,130)
+            this.context.putImageData(imagedata,150,150)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
   ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
@@ -2141,6 +2213,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
 
 Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name         | Type                                      | Mandatory  | Default Value         | Description                           |
@@ -2195,6 +2269,8 @@ setLineDash(segments: number[]): void
 
 Sets the dash line style.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name      | Type      | Description                 |
@@ -2238,6 +2314,8 @@ getLineDash(): number[]
 
 Obtains the dash line style.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Return value**
 
 | Type      | Description                      |
@@ -2249,40 +2327,40 @@ Obtains the dash line style.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasGetLineDash {
-  @State message: string = 'Hello World'
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  @Entry
+  @Component
+  struct CanvasGetLineDash {
+    @State message: string = 'Hello World'
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
-  build() {
-    Row() {
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-          .onClick(()=>{
-            console.error('before getlinedash clicked')
-            let res = this.context.getLineDash()
-            console.error(JSON.stringify(res))
-          })
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() => {
-            this.context.arc(100, 75, 50, 0, 6.28)
-            this.context.setLineDash([10,20])
-            this.context.stroke()
-            let res = this.context.getLineDash()
-          })
+    build() {
+      Row() {
+        Column() {
+          Text(this.message)
+            .fontSize(50)
+            .fontWeight(FontWeight.Bold)
+            .onClick(()=>{
+              console.error('before getlinedash clicked')
+              let res = this.context.getLineDash()
+              console.error(JSON.stringify(res))
+            })
+          Canvas(this.context)
+            .width('100%')
+            .height('100%')
+            .backgroundColor('#ffff00')
+            .onReady(() => {
+              this.context.arc(100, 75, 50, 0, 6.28)
+              this.context.setLineDash([10,20])
+              this.context.stroke()
+              let res = this.context.getLineDash()
+            })
+        }
+        .width('100%')
       }
-      .width('100%')
+      .height('100%')
     }
-    .height('100%')
   }
-}
   ```
 ![en-us_image_000000127777778](figures/en-us_image_000000127777778.png) 
 
@@ -2294,6 +2372,8 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
 
 Sets the quality of image smoothing. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name     | Type                   | Description                                      |
@@ -2308,6 +2388,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
 
 Displays the specified **ImageBitmap** object.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type                                      | Description                |
@@ -2377,26 +2459,26 @@ Since API version 9, this API is supported in ArkTS widgets.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct ToDataURL {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  @Entry
+  @Component
+  struct ToDataURL {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          var dataURL = this.context.toDataURL()
-        })
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var dataURL = this.context.toDataURL()
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
 
@@ -2406,6 +2488,8 @@ restore(): void
 
 Restores the saved drawing context.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Example**
 
   ```ts
@@ -2444,6 +2528,8 @@ save(): void
 
 Saves all states of the canvas in the stack. This API is usually called when the drawing state needs to be saved.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Example**
 
   ```ts
@@ -2482,6 +2568,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description      |
@@ -2513,7 +2601,7 @@ Creates a linear gradient.
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
+            this.context.fillRect(0, 0, 400, 400)
           })
       }
       .width('100%')
@@ -2531,6 +2619,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 Creates a linear gradient.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description               |
@@ -2564,7 +2654,7 @@ Creates a linear gradient.
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
+            this.context.fillRect(0, 0, 440, 440)
           })
       }
       .width('100%')
@@ -2575,7 +2665,55 @@ Creates a linear gradient.
 
   ![en-us_image_0000001257058405](figures/en-us_image_0000001257058405.png)
 
+### createConicGradient<sup>10+</sup>
+
+createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
+
+Creates a conic gradient.
+
+**Parameters**
+
+| Name      | Type  | Mandatory| Default Value| Description                                                        |
+| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
+| startAngle | number | Yes  | 0      | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
+| x          | number | Yes  | 0      | X-coordinate of the center of the conic gradient, in vp.                             |
+| y          | number | Yes  | 0      | Y-coordinate of the center of the conic gradient, in vp.                             |
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct CanvasExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffffff')
+        .onReady(() => {
+          var grad = this.context.createConicGradient(0, 50, 80)
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 30, 100, 100)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+  ![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png)
 
 ## CanvasPattern
 
 Defines an object created using the **[createPattern](#createpattern)** API.
+
+Since API version 9, this API is supported in ArkTS widgets.
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 3dfd9e208e..35211ab166 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -47,7 +47,7 @@ struct Page45 {
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
-          this.context.fillRect(0, 0, 500, 500)
+          this.context.fillRect(0, 0, 400, 400)
         })
     }
     .width('100%')
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
index 7e03641e13..0f7986996d 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -24,29 +24,29 @@ An **ImageData** object stores pixel data rendered on a canvas.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Translate {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.context.drawImage(this.img,0,0,130,130)
-          var imagedata = this.context.getImageData(50,50,130,130)
-          this.context.putImageData(imagedata,150,150)
-        })
+  @Entry
+  @Component
+  struct Translate {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.drawImage(this.img,0,0,130,130)
+            var imagedata = this.context.getImageData(50,50,130,130)
+            this.context.putImageData(imagedata,150,150)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
   ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index eedbf17622..8631b826c6 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -1,8 +1,8 @@
 # Path2D
 
-**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
+**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**
+>  **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.
 
@@ -18,11 +18,11 @@ 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.|
-| transform | Matrix2D | No| null | Transformation matrix of the new path.|
-
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | path2D | Yes| - | Path to be added to this path.| 
+  | transform | Matrix2D | No| null | Transformation matrix of the new path.| 
+  
 
 **Example**
 
@@ -109,10 +109,10 @@ 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.|
-| y | number | Yes| 0 | Y-coordinate of the target point.|
+  | 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**
 
@@ -158,10 +158,10 @@ 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.|
-| y | number | Yes| 0 | Y-coordinate of the target point.|
+  | 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**
 
@@ -208,14 +208,14 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -259,12 +259,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -308,14 +308,14 @@ 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.|
-| 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.|
-| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
+  | 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.| 
+  | counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.| 
 
 **Example**
 
@@ -358,13 +358,13 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+  | 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**
 
@@ -407,16 +407,16 @@ 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.|
-| 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. The unit is radian.|
-| startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.|
-| endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.|
-| counterclockwise | boolean | No| false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.|
+  | 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. The unit is radian.| 
+  | startAngle | number | Yes| 0 | Angle of the start point for drawing the ellipse. The unit is radian.| 
+  | endAngle | number | Yes| 0 | Angle of the end point for drawing the ellipse. The unit is radian.| 
+  | counterclockwise | boolean | No| false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.| 
 
 **Example**
 
@@ -459,12 +459,12 @@ 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 upper left corner of the rectangle.|
-| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
-| w | number | Yes| 0 | Width of the rectangle.|
-| h | number | Yes| 0 | Height of the rectangle.|
+  | 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.| 
+  | w | number | Yes| 0 | Width of the rectangle.| 
+  | h | number | Yes| 0 | Height of the rectangle.| 
 
 **Example**
 
diff --git a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 9aa9657ae9..4c996f22ce 100644
--- a/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -12,6 +12,8 @@ Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text o
 
 OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name | Type                                                    | Mandatory| Description                            |
@@ -23,25 +25,25 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
 
 ## Attributes
 
-| Name                                                  | Type                                                         | Description                                                  |
+| Name                                                 | Type                                                        | Description                                                        |
 | ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| [fillStyle](#fillstyle)                               | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **string**, this attribute indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
-| [lineWidth](#linewidth)                               | number                                                       | Line width.                                                  |
-| [strokeStyle](#strokestyle)                           | string \| [CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **\<color>**, this parameter indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API. |
-| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'** |
-| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'** |
-| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10** |
-| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'** |
-| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'** |
-| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'** |
-| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque. |
-| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>- Default value: **0.0** |
-| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>- Default value: **'source-over'** |
-| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>- Default value: **0.0** |
-| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.                                                |
-| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.        |
-| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.        |
-| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>- Default value: **true** |
+| [fillStyle](#fillstyle)                               | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **string**, this attribute indicates the color of the filling area.<br>- When the type is **number**, this attribute indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineWidth](#linewidth)                               | number                                                       | Line width.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [strokeStyle](#strokestyle)                           | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **string**, this attribute indicates the stroke color.<br>- When the type is **number**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br><br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.                |
+| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>- Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>- Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 > **NOTE**
 > For **fillStyle**, **shadowColor**, and **strokeStyle**, the value format of the string type is 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', '\#FFFFFF'.
@@ -66,7 +68,7 @@ struct FillStyleExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.offContext.fillStyle = '#0000ff'
-          this.offContext.fillRect(20, 160, 150, 100)
+          this.offContext.fillRect(20, 20, 150, 100)
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
@@ -700,6 +702,8 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 Fills a rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description           |
@@ -747,6 +751,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 Draws an outlined rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description          |
@@ -794,6 +800,8 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description           |
@@ -843,6 +851,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
 
 Draws filled text on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description             |
@@ -891,6 +901,8 @@ strokeText(text: string, x: number, y: number): void
 
 Draws a text stroke on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type    | Mandatory  | Default Value | Description             |
@@ -939,6 +951,8 @@ measureText(text: string): TextMetrics
 
 Returns a **TextMetrics** object used to obtain the width of specified text.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description        |
@@ -947,9 +961,9 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
 
  **Return value**
 
-| Type         | Description     |
-| ----------- | ------- |
-| TextMetrics | **TextMetrics** object.|
+| Type       | Description                                                        |
+| ----------- | ------------------------------------------------------------ |
+| TextMetrics | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 **TextMetrics** attributes
 
@@ -1009,6 +1023,8 @@ stroke(path?: Path2D): void
 
 Strokes a path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type                                      | Mandatory  | Default Value | Description          |
@@ -1058,6 +1074,8 @@ beginPath(): void
 
 Creates a drawing path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Example**
 
   ```ts
@@ -1101,6 +1119,8 @@ moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description       |
@@ -1149,6 +1169,8 @@ lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description       |
@@ -1197,6 +1219,8 @@ closePath(): void
 
 Draws a closed path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Example**
 
   ```ts
@@ -1240,12 +1264,14 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
 
 Creates a pattern for image filling based on a specified source image and repetition mode.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name    | Type                                      | Mandatory  | Default Value | Description                                      |
 | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
 | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes   | null | Source image. For details, see **ImageBitmap**.                 |
-| repetition | string                                   | Yes   | ""  | Repetition mode. The value can be **"repeat"**, **"repeat-x"**, **"repeat-y"**, or **"no-repeat"**.|
+| repetition | string                                   | Yes   | ""  | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.|
 
 **Return value**
 
@@ -1294,6 +1320,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description            |
@@ -1346,6 +1374,8 @@ 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  | Default Value | Description         |
@@ -1396,6 +1426,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 Draws an arc on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name          | Type     | Mandatory  | Default Value  | Description        |
@@ -1447,6 +1479,8 @@ 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  | Default Value | Description             |
@@ -1497,6 +1531,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 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               |
@@ -1549,6 +1585,8 @@ 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  | Default Value | Description           |
@@ -1597,6 +1635,8 @@ fill(fillRule?: CanvasFillRule): void
 
 Fills the area inside a closed path on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1638,6 +1678,8 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void
 
 Fills the area inside a closed path on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1695,6 +1737,8 @@ clip(fillRule?: CanvasFillRule): void
 
 Sets the current path to a clipping path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1741,6 +1785,8 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
 
 Sets a closed path to a clipping path.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type            | Mandatory  | Default Value      | Description                                      |
@@ -1752,39 +1798,39 @@ Sets a closed path to a clipping path.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Clip {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  @Entry
+  @Component
+  struct Clip {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          let region = new Path2D()
-          region.moveTo(30, 90)
-          region.lineTo(110, 20)
-          region.lineTo(240, 130)
-          region.lineTo(60, 130)
-          region.lineTo(190, 20)
-          region.lineTo(270, 90)
-          region.closePath()
-          this.offContext.clip(region,"evenodd")
-          this.offContext.fillStyle = "rgb(0,255,0)"
-          this.offContext.fillRect(0, 0, 600, 600)
-          var image = this.offContext.transferToImageBitmap()
-          this.context.transferFromImageBitmap(image)
-        })
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let region = new Path2D()
+            region.moveTo(30, 90)
+            region.lineTo(110, 20)
+            region.lineTo(240, 130)
+            region.lineTo(60, 130)
+            region.lineTo(190, 20)
+            region.lineTo(270, 90)
+            region.closePath()
+            this.offContext.clip(region,"evenodd")
+            this.offContext.fillStyle = "rgb(0,255,0)"
+            this.offContext.fillRect(0, 0, 600, 600)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
   ![en-us_image_000000127777779](figures/en-us_image_000000127777779.png)
@@ -1797,6 +1843,8 @@ filter(filter: string): void
 
 Sets a filter for the image on the canvas. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description          |
@@ -1810,6 +1858,8 @@ getTransform(): Matrix2D
 
 Obtains the current transformation matrix being applied to the context. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### resetTransform
 
@@ -1817,6 +1867,8 @@ resetTransform(): void
 
 Resets the current transform to the identity matrix. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### direction
 
@@ -1824,6 +1876,8 @@ direction(direction: CanvasDirection): void
 
 Sets the text direction for drawing text. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 
 ### rotate
 
@@ -1831,6 +1885,8 @@ rotate(angle: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description                                      |
@@ -1876,6 +1932,8 @@ scale(x: number, y: number): void
 
 Scales the canvas based on scale factors.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description         |
@@ -1924,6 +1982,8 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi
 
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 > **NOTE**
 >
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
@@ -1988,6 +2048,8 @@ setTransform(a: number, b: number, c: number, d: number, e: number, f: number):
 
 Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description                  |
@@ -2041,6 +2103,8 @@ translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description      |
@@ -2092,6 +2156,8 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
 
 Draws an image on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets, except that **PixelMap** objects are not supported.
+
  **Parameters**
 
 | Name | Type                                      | Mandatory  | Default Value | Description                           |
@@ -2145,9 +2211,11 @@ createImageData(sw: number, sh: number): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
-| Name | Type    | Mandatory  | Default Value  | Description           |
+| Parameters  | Type    | Mandatory  | Default Value  | Description           |
 | ---- | ------ | ---- | ---- | ------------- |
 | sw   | number | Yes   | 0    | Width of the **ImageData** object.|
 | sh   | number | Yes   | 0    | Height of the **ImageData** object.|
@@ -2157,6 +2225,8 @@ createImageData(imageData: ImageData): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name   | Type                                      | Mandatory  | Default Value  | Description              |
@@ -2190,6 +2260,27 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi
 | ---------------------------------------- | ------------ |
 | [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.|
 
+### setPixelMap
+
+setPixelMap(value?: PixelMap): void
+
+Draws the input [PixelMap](../apis/js-apis-image.md#pixelmap7) object on the canvas.
+
+ **Parameters**
+
+| Name | Type    | Mandatory  | Default Value | Description             |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | Yes   | 0    | X-coordinate of the upper left corner of the output area.|
+| sy   | number | Yes   | 0    | Y-coordinate of the upper left corner of the output area.|
+| sw   | number | Yes   | 0    | Width of the output area.    |
+| sh   | number | Yes   | 0    | Height of the output area.    |
+
+**Return value**
+
+| Type                                      | Description          |
+| ---------------------------------------- | ------------ |
+| [PixelMap](../apis/js-apis-image.md#pixelmap7) | **PixelMap** object.|
+
 
 ### getImageData
 
@@ -2197,6 +2288,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
 Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description             |
@@ -2217,32 +2310,32 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+  @Entry
+  @Component
+  struct GetImageData {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.offContext.drawImage(this.img,0,0,130,130)
-          var imagedata = this.offContext.getImageData(50,50,130,130)
-          this.offContext.putImageData(imagedata,150,150)
-          var image = this.offContext.transferToImageBitmap()
-          this.context.transferFromImageBitmap(image)
-        })
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.drawImage(this.img,0,0,130,130)
+            var imagedata = this.offContext.getImageData(50,50,130,130)
+            this.offContext.putImageData(imagedata,150,150)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
   ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
@@ -2256,6 +2349,8 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
 
 Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name     | Type    | Mandatory  | Default Value         | Description                           |
@@ -2311,6 +2406,8 @@ setLineDash(segments: number[]): void
 
 Sets the dash line style.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Parameters**
 
 | Name  | Type      | Description                 |
@@ -2320,31 +2417,31 @@ Sets the dash line style.
 **Example**
 
   ```ts
-@Entry
-@Component
-struct SetLineDash {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-  
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.offContext.arc(100, 75, 50, 0, 6.28)
-          this.offContext.setLineDash([10,20])
-          this.offContext.stroke()
-          var image = this.offContext.transferToImageBitmap()
-          this.context.transferFromImageBitmap(image)
-      })
+  @Entry
+  @Component
+  struct SetLineDash {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.arc(100, 75, 50, 0, 6.28)
+            this.offContext.setLineDash([10,20])
+            this.offContext.stroke()
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+        })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
   ![en-us_image_000000127777772](figures/en-us_image_000000127777772.png)
 
@@ -2355,6 +2452,8 @@ getLineDash(): number[]
 
 Obtains the dash line style.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
 **Return value**
 
 | Type      | Description                      |
@@ -2365,42 +2464,42 @@ Obtains the dash line style.
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct OffscreenCanvasGetLineDash {
-  @State message: string = 'Hello World'
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-  build() {
-    Row() {
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-          .onClick(()=>{
-            console.error('before getlinedash clicked')
-            let res = this.offContext.getLineDash()
-            console.error(JSON.stringify(res))
-          })
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() => {
-            this.offContext.arc(100, 75, 50, 0, 6.28)
-            this.offContext.setLineDash([10,20])
-            this.offContext.stroke()
-            let res = this.offContext.getLineDash()
-            var image = this.offContext.transferToImageBitmap()
-            this.context.transferFromImageBitmap(image)
-          })
+  @Entry
+  @Component
+  struct OffscreenCanvasGetLineDash {
+    @State message: string = 'Hello World'
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    build() {
+      Row() {
+        Column() {
+          Text(this.message)
+            .fontSize(50)
+            .fontWeight(FontWeight.Bold)
+            .onClick(()=>{
+              console.error('before getlinedash clicked')
+              let res = this.offContext.getLineDash()
+              console.error(JSON.stringify(res))
+            })
+          Canvas(this.context)
+            .width('100%')
+            .height('100%')
+            .backgroundColor('#ffff00')
+            .onReady(() => {
+              this.offContext.arc(100, 75, 50, 0, 6.28)
+              this.offContext.setLineDash([10,20])
+              this.offContext.stroke()
+              let res = this.offContext.getLineDash()
+              var image = this.offContext.transferToImageBitmap()
+              this.context.transferFromImageBitmap(image)
+            })
+        }
+        .width('100%')
       }
-      .width('100%')
+      .height('100%')
     }
-    .height('100%')
   }
-}
   ```
 ![en-us_image_000000127777778](figures/en-us_image_000000127777778.png) 
 
@@ -2430,28 +2529,28 @@ Since API version 9, this API is supported in ArkTS widgets.
 **Example**
 
   ```ts
-// xxx.ets
-@Entry
-@Component
-struct ToDataURL {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  // xxx.ets  
+  @Entry
+  @Component
+  struct ToDataURL {
+      private settings: RenderingContextSettings = new RenderingContextSettings(true)
+      private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
 
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          var dataURL = this.offContext.toDataURL()
-        })
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            var dataURL = this.offContext.toDataURL()
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 
 
@@ -2461,6 +2560,8 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
 
 Sets the quality of image smoothing. This API is a void API.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type                   | Description                                      |
@@ -2524,37 +2625,39 @@ restore(): void
 
 Restores the saved drawing context.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Example**
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-  
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.offContext.save() // save the default state
-          this.offContext.fillStyle = "#00ff00"
-          this.offContext.fillRect(20, 20, 100, 100)
-          this.offContext.restore() // restore to the default state
-          this.offContext.fillRect(150, 75, 100, 100)
-          var image = this.offContext.transferToImageBitmap()
-          this.context.transferFromImageBitmap(image)
-        })
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.save() // save the default state
+            this.offContext.fillStyle = "#00ff00"
+            this.offContext.fillRect(20, 20, 100, 100)
+            this.offContext.restore() // restore to the default state
+            this.offContext.fillRect(150, 75, 100, 100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 ![en-us_image_000000127777781](figures/en-us_image_000000127777781.png) 
 
@@ -2565,37 +2668,39 @@ save(): void
 
 Saves the current drawing context.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Example**
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true)
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
-  
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-      Canvas(this.context)
-        .width('100%')
-        .height('100%')
-        .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.offContext.save() // save the default state
-          this.offContext.fillStyle = "#00ff00"
-          this.offContext.fillRect(20, 20, 100, 100)
-          this.offContext.restore() // restore to the default state
-          this.offContext.fillRect(150, 75, 100, 100)
-          var image = this.offContext.transferToImageBitmap()
-          this.context.transferFromImageBitmap(image)
-        })
+  @Entry
+  @Component
+  struct CanvasExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offContext.save() // save the default state
+            this.offContext.fillStyle = "#00ff00"
+            this.offContext.fillRect(20, 20, 100, 100)
+            this.offContext.restore() // restore to the default state
+            this.offContext.fillRect(150, 75, 100, 100)
+            var image = this.offContext.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
     }
-    .width('100%')
-    .height('100%')
   }
-}
   ```
 ![en-us_image_000000127777781](figures/en-us_image_000000127777781.png) 
 
@@ -2606,6 +2711,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
+Since API version 9, this API is supported in ArkTS widgets.
+
  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description      |
@@ -2638,7 +2745,7 @@ Creates a linear gradient.
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 500, 500)
+            this.offContext.fillRect(0, 0, 400, 400)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
@@ -2658,7 +2765,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 Creates a linear gradient.
 
- **Parameters**
+Since API version 9, this API is supported in ArkTS widgets.
+
+  **Parameters**
 
 | Name | Type    | Mandatory  | Default Value | Description               |
 | ---- | ------ | ---- | ---- | ----------------- |
@@ -2669,7 +2778,7 @@ Creates a linear gradient.
 | y1   | number | Yes   | 0    | Y-coordinate of the center of the end circle.        |
 | r1   | number | Yes   | 0    | Radius of the end circle, which must be a non-negative finite number.|
 
- **Example** 
+  **Example** 
 
   ```ts
   // xxx.ets
@@ -2692,7 +2801,7 @@ Creates a linear gradient.
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 500, 500)
+            this.offContext.fillRect(0, 0, 440, 440)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
@@ -2705,7 +2814,59 @@ Creates a linear gradient.
 
   ![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png)
 
+### createConicGradient<sup>10+</sup>
+
+createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
+
+Creates a conic gradient.
+
+**Parameters**
+
+| Name      | Type  | Mandatory| Default Value| Description                                                        |
+| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
+| startAngle | number | Yes  | 0      | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
+| x          | number | Yes  | 0      | X-coordinate of the center of the conic gradient, in vp.                             |
+| y          | number | Yes  | 0      | Y-coordinate of the center of the conic gradient, in vp.                             |
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OffscreenCanvasConicGradientPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffffff')
+        .onReady(() =>{
+          var grad = this.offContext.createConicGradient(0, 50, 80)
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
+          this.offContext.fillStyle = grad
+          this.offContext.fillRect(0, 30, 100, 100)
+          var image = this.offContext.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+  ![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png)
 
 ## CanvasPattern
 
 Defines an object created using the **[createPattern](#createpattern)** API.
+
+Since API version 9, this API is supported in ArkTS widgets.
-- 
GitLab