Update docs (10240)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

@@ -2,17 +2,20 @@
 
 The **\<RichText>** component parses and displays HTML text.
 
-> **NOTE**
+>  **NOTE**
 >
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
+## Required Permissions
+
+None
 ## Child Components
 
 Not supported
 
 ## APIs
 
-RichText(content:string)
+RichText(content: string)
 
 **Parameters**
 
@@ -42,7 +45,7 @@ RichText(content:string)
 | \<u>\</u> | Defines text that should be styled differently or have a non-textual annotation, such as misspelt words or a proper name in Chinese text. It is recommended that you avoid using the \<u> tag where it could be confused with a hyperlink.| \<p>\<u>This is an underlined paragraph\</u>\</p> |
 | \<style>\</style> | Used to embed CSS within an HTML document.| \<style>h1{color:red;}p{color:blue;}\</style> |
 | style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is a paragraph\</p> |
-| \<script>\</script> | Used to embed or reference a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
+| \<script>\</script> | Embeds or references a client-side script, such as JavaScript. | \<script>document.write("Hello World!")\</script> |
 
 ## Example
 

en/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

@@ -24,9 +24,9 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
 
 | Name| Description|
 | -------- | -------- |
-| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when a long press gesture is recognized.|
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Callback invoked when the finger used for a long press gesture is lift.|
-| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after a long press gesture is recognized.|
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when a long press gesture is recognized.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the finger used for a long press gesture is lift.|
+| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a long press gesture is recognized.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

@@ -15,24 +15,24 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
 
 **Parameters**
 
-| Name      | Type         | Mandatory | Description                              |
-| --------- | ------------ | --------- | ---------------------------------------- |
-| fingers   | number       | No        | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1** |
-| direction | PanDirection | No        | Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All** |
-| distance  | number       | No        | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
+| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
 
 ## PanDirection enums
 
-| Name       | Description           |
-| ---------- | --------------------- |
-| All        | All directions.       |
-| Horizontal | Horizontal panning.   |
-| Vertical   | Vertical panning.     |
-| Left       | Panning to the left.  |
-| Right      | Panning to the right. |
-| Up         | Panning up.           |
-| Down       | Panning down.         |
-| None       | Panning disabled.     |
+| Name| Description|
+| -------- | -------- |
+| All | All directions.|
+| Horizontal | Horizontal panning.|
+| Vertical | Vertical panning.|
+| Left | Panning to the left.|
+| Right | Panning to the right.|
+| Up | Panning up.|
+| Down | Panning down.|
+| None | Panning disabled.|
 
 
 ## PanGestureOptions
@@ -47,21 +47,21 @@ See the **PanGesture** parameters.
 
 **APIs**
 
-| Name                              | Description                 |
-| --------------------------------- | --------------------------- |
-| setDirection(value: PanDirection) | Sets the direction.         |
-| setDistance(value: number)        | Sets the distance.          |
-| setFingers(value: number)         | Sets the number of fingers. |
+| Name| Description|
+| -------- | -------- |
+| setDirection(value: PanDirection) | Sets the direction.|
+| setDistance(value: number) | Sets the distance.|
+| setFingers(value: number) | Sets the number of fingers.|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when a pan gesture is recognized. |
-| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the pan gesture status is updated. |
-| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Callback invoked when the finger used for a pan gesture is lift. |
-| onActionCancel(event: () =&gt; void)     | Callback invoked when a tap cancellation event is received after a pan gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when a pan gesture is recognized.|
+| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the pan gesture status is updated.|
+| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Invoked when the finger used for a pan gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.|
 
 
 ## Example
@@ -115,3 +115,13 @@ struct PanGestureExample {
   }
 }
 ```
+
+**Diagrams**
+
+Pannig to the left:
+
+![en-us_image_0000001174264374](figures/en-us_image_0000001174264374.png) 
+
+Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner.
+
+ ![en-us_image1_0000001174264374](figures/en-us_image1_0000001174264374.png) 

en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

@@ -13,20 +13,20 @@ PinchGesture(value?: { fingers?: number, distance?: number })
 
 **Parameters**
 
-| Name     | Type   | Mandatory | Description                              |
-| -------- | ------ | --------- | ---------------------------------------- |
-| fingers  | number | No        | Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2** |
-| distance | number | No        | Minimum recognition distance, in vp.<br>Default value: **3** |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a pinch. The value ranges from 2 to 5.<br>Default value: **2**|
+| distance | number | No| Minimum recognition distance, in vp.<br>Default value: **3**|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized. |
-| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen. |
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift. |
-| onActionCancel(event: () =&gt; void)     | Triggered when a tap cancellation event is received after a pinch gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a pinch gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the user moves the finger in a pinch gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when the finger used for a pinch gesture is lift.|
+| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after a pinch gesture is recognized.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

@@ -23,10 +23,10 @@ RotationGesture(value?: { fingers?: number, angle?: number })
 
 | Parameter| Description|
 | -------- | -------- |
-| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.|
-| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
-| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.|
-| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
+| onActionStart(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when a rotation gesture is recognized.|
+| onActionUpdate(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the user moves the finger in a rotation gesture on the screen.|
+| onActionEnd(event:(event?: [GestureEvent](ts-gesture-settings.md)) => void) | Triggered when the finger used for the rotation gesture is lift.|
+| onActionCancel(event: () => void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized.|
 
 
 ## Example
@@ -49,7 +49,7 @@ struct RotationGestureExample {
       .padding(20)
       .border({ width: 3 })
       .margin(80)
-      .rotate({ angle: this.angle })
+      .rotate({ z: 1, angle: this.angle })
       // The gesture event is triggered by rotating with two fingers.
       .gesture(
       RotationGesture()

en/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

@@ -13,27 +13,27 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
 
 **Parameters**
 
-| Name      | Type           | Mandatory | Description                              |
-| --------- | -------------- | --------- | ---------------------------------------- |
-| fingers   | number         | No        | Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1** |
-| direction | SwipeDirection | No        | Swipe direction.<br>Default value: **SwipeDirection.All** |
-| speed     | number         | No        | Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100** |
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| fingers | number | No| Minimum number of fingers to trigger a swipe gesture. The value ranges from 1 to 10.<br>Default value: **1**|
+| direction | [swipeDirection](#swipedirection)| No| Swipe direction.<br>Default value: **SwipeDirection.All**|
+| speed | number | No| Minimum speed of the swipe gesture, in vp/s.<br>Default value: **100**|
 
 ## SwipeDirection
 
-| Name       | Description           |
-| ---------- | --------------------- |
-| All        | All directions.       |
-| Horizontal | Horizontal direction. |
-| Vertical   | Vertical direction.   |
-| None       | Swiping disabled.     |
+| Name| Description|
+| -------- | -------- |
+| All | All directions.|
+| Horizontal | Horizontal direction.|
+| Vertical | Vertical direction.|
+| None | Swiping disabled.|
 
 
 ## Events
 
-| Name                                     | Description                              |
-| ---------------------------------------- | ---------------------------------------- |
-| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md)) =&gt; void) | Triggered when a swipe gesture is recognized. |
+| Name| Description|
+| -------- | -------- |
+| onAction(event:(event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when a swipe gesture is recognized.|
 
 ## Example
 
@@ -55,7 +55,7 @@ struct SwipeGestureExample {
       .width(300)
       .height(200)
       .margin(100)
-      .rotate({ angle: this.rotateAngle })
+      .rotate({ z: 1, angle: this.rotateAngle })
       // The gesture event is triggered by swiping vertically with one finger.
       .gesture(
       SwipeGesture({ direction: SwipeDirection.Vertical })

en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -29,30 +29,30 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
 
 | Name      | Type   | Mandatory  | Description                         |
 | --------- | ------- | ---- | ----------------------------- |
-| antialias | boolean | No   | Whether antialiasing is enabled.<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.|
-| [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**|
+| 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.|
+| [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**|
 
 > **NOTE**
 >
@@ -66,8 +66,8 @@ Configures the settings of a **CanvasRenderingContext2D** object, including whet
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -96,8 +96,8 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -126,8 +126,8 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -158,8 +158,8 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -192,8 +192,8 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -227,8 +227,8 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -262,8 +262,8 @@ struct MiterLimit {
 @Entry
 @Component
 struct Fonts {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -292,8 +292,8 @@ struct Fonts {
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -337,8 +337,8 @@ struct CanvasExample {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -382,8 +382,8 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -415,8 +415,8 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -427,7 +427,7 @@ struct LineDashOffset {
         .onReady(() =>{
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
-          this.context.lineDashOffset = 10.0;
+          this.context.lineDashOffset = 10.0
           this.context.stroke();
       })
     }
@@ -461,8 +461,8 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -499,8 +499,8 @@ struct GlobalCompositeOperation {
 @Entry
 @Component
 struct ShadowBlur {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -531,8 +531,8 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -563,8 +563,8 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -596,8 +596,8 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  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)
@@ -628,9 +628,9 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -677,8 +677,8 @@ Fills a rectangle on the canvas.
   @Entry
   @Component
   struct FillRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -765,8 +765,8 @@ Clears the content in a rectangle on the canvas.
   @Entry
   @Component
   struct ClearRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -797,12 +797,11 @@ Draws filled text on the canvas.
 
 **Parameters**
 
-| Name      | Type    | Mandatory  | Default Value | Description             |
-| -------- | ------ | ---- | ---- | --------------- |
-| text     | string | Yes   | ""   | Text to draw.     |
-| x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
-| y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
-| maxWidth | number | No   | -    | Maximum width allowed for the text.   |
+| Name    | Type  | Mandatory| Default Value| Description                         |
+| -------- | ------ | ---- | ------ | ----------------------------- |
+| text     | string | Yes  | ''     | Text to draw.         |
+| x        | number | Yes  | 0      | X-coordinate of the lower left corner of the text.|
+| y        | number | Yes  | 0      | Y-coordinate of the lower left corner of the text.|
 
 **Example**
 
@@ -811,8 +810,8 @@ Draws filled text on the canvas.
   @Entry
   @Component
   struct FillText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -842,12 +841,12 @@ Draws a text stroke on the canvas.
 
 **Parameters**
 
-| Name      | Type    | Mandatory  | Default Value | Description             |
-| -------- | ------ | ---- | ---- | --------------- |
-| text     | string | Yes   | ""  | Text to draw.     |
-| x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
-| y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
-| maxWidth | number | No   | -    | Maximum width of the text to be drawn. |
+| Name    | Type  | Mandatory| Default Value| Description                         |
+| -------- | ------ | ---- | ------ | ----------------------------- |
+| text     | string | Yes  | ''     | Text to draw.         |
+| x        | number | Yes  | 0      | X-coordinate of the lower left corner of the text.|
+| y        | number | Yes  | 0      | Y-coordinate of the lower left corner of the text.|
+| maxWidth | number | No  | -      | Maximum width of the text to be drawn.  |
 
 **Example**
 
@@ -856,8 +855,8 @@ Draws a text stroke on the canvas.
   @Entry
   @Component
   struct StrokeText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -887,14 +886,14 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
 
 **Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description        |
-| ---- | ------ | ---- | ---- | ---------- |
-| text | string | Yes   | ""   | Text to be measured.|
+| Name| Type  | Mandatory| Default Value| Description                |
+| ---- | ------ | ---- | ------ | -------------------- |
+| text | string | Yes  | ''     | Text to be measured.|
 
 **Return value**
 
-| Type         | Description     |
-| ----------- | ------- |
+| Type       | Description            |
+| ----------- | ---------------- |
 | TextMetrics | **TextMetrics** object.|
 
 **TextMetrics**
@@ -925,8 +924,8 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
   @Entry
   @Component
   struct MeasureText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -968,8 +967,8 @@ Strokes a path.
   @Entry
   @Component
   struct Stroke {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1008,8 +1007,8 @@ Creates a drawing path.
   @Entry
   @Component
   struct BeginPath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1055,8 +1054,8 @@ Moves a drawing path to a target position on the canvas.
   @Entry
   @Component
   struct MoveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1100,8 +1099,8 @@ Connects the current point to a target position using a straight line.
   @Entry
   @Component
   struct LineTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1138,8 +1137,8 @@ Draws a closed path.
   @Entry
   @Component
   struct ClosePath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1173,10 +1172,10 @@ Creates a pattern for image filling based on a specified source image and repeti
 
 **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"**.|
+| 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: **''**|
 
 **Return value**
 
@@ -1191,9 +1190,9 @@ Creates a pattern for image filling based on a specified source image and repeti
   @Entry
   @Component
   struct CreatePattern {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1240,8 +1239,8 @@ Draws a cubic bezier curve on the canvas.
   @Entry
   @Component
   struct BezierCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1287,8 +1286,8 @@ Draws a quadratic curve on the canvas.
   @Entry
   @Component
   struct QuadraticCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1297,10 +1296,10 @@ Draws a quadratic curve on the canvas.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.beginPath();
-            this.context.moveTo(20, 20);
-            this.context.quadraticCurveTo(100, 100, 200, 20);
-            this.context.stroke();
+            this.context.beginPath()
+            this.context.moveTo(20, 20)
+            this.context.quadraticCurveTo(100, 100, 200, 20)
+            this.context.stroke()
         })
       }
       .width('100%')
@@ -1336,8 +1335,8 @@ Draws an arc on the canvas.
   @Entry
   @Component
   struct Arc {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1383,8 +1382,8 @@ Draws an arc based on the radius and points on the arc.
   @Entry
   @Component
   struct ArcTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1393,9 +1392,9 @@ Draws an arc based on the radius and points on the arc.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.moveTo(100, 20);
-            this.context.arcTo(150, 20, 150, 70, 50);
-            this.context.stroke();
+            this.context.moveTo(100, 20)
+            this.context.arcTo(150, 20, 150, 70, 50)
+            this.context.stroke()
           })
       }
       .width('100%')
@@ -1424,7 +1423,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
 | 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 in the counterclockwise direction.    |
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise.    |
 
 **Example**
 
@@ -1433,8 +1432,8 @@ Draws an ellipse in the specified rectangular region on the canvas.
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1479,8 +1478,8 @@ Creates a rectangle on the canvas.
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1522,8 +1521,8 @@ Fills the area inside a closed path on the canvas.
   @Entry
   @Component
   struct Fill {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1574,17 +1573,17 @@ struct Fill {
         .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();
+          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()
           // Fill path
-          this.context.fillStyle = 'green';
-          this.context.fill(region, "evenodd");
+          this.context.fillStyle = 'green'
+          this.context.fill(region, "evenodd")
         })
     }
     .width('100%')
@@ -1615,8 +1614,8 @@ Sets the current path to a clipping area.
   @Entry
   @Component
   struct Clip {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1669,9 +1668,9 @@ struct Clip {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.rect(80,10,20,130);
-          region.rect(40,50,100,50);
+          let region = new Path2D()
+          region.rect(80,10,20,130)
+          region.rect(40,50,100,50)
           this.context.clip(region,"evenodd")
           this.context.fillStyle = "rgb(255,0,0)"
           this.context.fillRect(0, 0, this.context.width, this.context.height)
@@ -1739,8 +1738,8 @@ Rotates a canvas clockwise around its coordinate axes.
   @Entry
   @Component
   struct Rotate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1782,8 +1781,8 @@ Scales the canvas based on the given scale factors.
   @Entry
   @Component
   struct Scale {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1814,7 +1813,7 @@ 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.
 
 > **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.
 >
 > - x' = scaleX \* x + skewY \* y + translateX
@@ -1839,8 +1838,8 @@ Defines a transformation matrix. To transform a graph, you only need to set para
   @Entry
   @Component
   struct Transform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1892,8 +1891,8 @@ Resets the existing transformation matrix and creates a new transformation matri
   @Entry
   @Component
   struct SetTransform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1943,8 +1942,8 @@ Moves the origin of the coordinate system.
   @Entry
   @Component
   struct Translate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1999,9 +1998,9 @@ Draws an image on the canvas.
   @Entry
   @Component
   struct ImageExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2010,7 +2009,7 @@ Draws an image on the canvas.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
         })
       }
       .width('100%')
@@ -2103,8 +2102,8 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
 @Entry
 @Component
 struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
   build() {
@@ -2114,9 +2113,9 @@ struct GetImageData {
         .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);
+          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%')
@@ -2155,8 +2154,8 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
   @Entry
   @Component
   struct PutImageData {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2383,7 +2382,7 @@ struct ToDataURL {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          var dataURL = this.context.toDataURL();
+          var dataURL = this.context.toDataURL()
         })
     }
     .width('100%')
@@ -2406,10 +2405,10 @@ Restores the saved drawing context.
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-
+  
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2417,11 +2416,11 @@ Restores the saved drawing context.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2445,8 +2444,8 @@ Saves all states of the canvas in the stack. This API is usually called when the
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2455,11 +2454,11 @@ Saves all states of the canvas in the stack. This API is usually called when the
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2492,8 +2491,8 @@ Creates a linear gradient.
   @Entry
   @Component
   struct CreateLinearGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2543,8 +2542,8 @@ Creates a linear gradient.
   @Entry
   @Component
   struct CreateRadialGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

en/application-dev/reference/arkui-ts/ts-combined-gestures.md

 # Combined Gestures
 
+Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures.
 
 > **NOTE**
 >
-> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## APIs
 
 GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | -------- | -------- | -------- | -------- |
-| mode | GestureMode | Yes | - | Recognition mode of combined gestures. |
-| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\| [PanGesture](ts-basic-gestures-pangesture.md)<br/>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination. |
+- Parameters
+  | Name| Type| Mandatory| Default Value| Description|
+  | -------- | -------- | -------- | -------- | -------- |
+  | mode | [GestureMode](#gesturemode)                                                  | Yes| - | Recognition mode of combined gestures.|
+  | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
 
 ## GestureMode
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized. |
-| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
-| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
+| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
+| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
+| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
 
 
 ## Events
 
-| Name | Description |
+| Name| Description|
 | -------- | -------- |
-| onCancel(event: () =&gt; void) | Callback for the **GestureMode.Sequence** cancellation event. |
+| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
 
 
 ## Example
 
-
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct GestureGroupExample {
-  @State count: number = 0
-  @State offsetX: number = 0
-  @State offsetY: number = 0
-  @State borderStyles: BorderStyle = BorderStyle.Solid
+  @State count: number = 0;
+  @State offsetX: number = 0;
+  @State offsetY: number = 0;
+  @State positionX: number = 0;
+  @State positionY: number = 0;
+  @State borderStyles: BorderStyle = BorderStyle.Solid;
 
   build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+    Column() {
       Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
-    }.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
-    .height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
+    }
+    .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
+    .height(150)
+    .width(200)
+    .padding(20)
+    .margin(20)
+    .border({ width: 3, style: this.borderStyles })
     .gesture(
-      GestureGroup(GestureMode.Sequence,
-        LongPressGesture({ repeat: true })
-          .onAction((event: GestureEvent) => {
-            if (event.repeat) {this.count++}
-            console.log('LongPress onAction')
-          })
-          .onActionEnd(() => {
-            console.log('LongPress end')
-          }),
-        PanGesture({})
-          .onActionStart(() => {
-            this.borderStyles = BorderStyle.Dashed
-            console.log('pan start')
-          })
-          .onActionUpdate((event: GestureEvent) => {
-            this.offsetX = event.offsetX
-            this.offsetY = event.offsetY
-            console.log('pan update')
-          })
-      )
+      // The following combined gestures are recognized in sequential recognition mode. If the long press gesture event is not triggered correctly, the drag gesture event will not be triggered.
+    GestureGroup(GestureMode.Sequence,
+    LongPressGesture({ repeat: true })
+      .onAction((event: GestureEvent) => {
+        if (event.repeat) {
+          this.count++;
+        }
+        console.info('LongPress onAction');
+      })
+      .onActionEnd(() => {
+        console.info('LongPress end');
+      }),
+    PanGesture()
+      .onActionStart(() => {
+        this.borderStyles = BorderStyle.Dashed;
+        console.info('pan start');
+      })
+      .onActionUpdate((event: GestureEvent) => {
+        this.offsetX = this.positionX + event.offsetX;
+        this.offsetY = this.positionY + event.offsetY;
+        console.info('pan update');
+      })
+      .onActionEnd(() => {
+        this.positionX = this.offsetX;
+        this.positionY = this.offsetY;
+        this.borderStyles = BorderStyle.Solid;
+        console.info('pan end');
+      })
+    )
       .onCancel(() => {
-        console.log('sequence gesture canceled')
+        console.info('sequence gesture canceled');
       })
     )
   }
 }
 ```
 
-![en-us_image_0000001212058490](figures/en-us_image_0000001212058490.gif)
+Diagram:
+
+In sequence recognition mode the long press gesture event is triggered first.
+
+![en-us_image_0000001174104384](figures/en-us_image_0000001174104384.png)
+
+After the long press gesture is recognized, the drag gesture event is triggered.
+
+ ![en-us_image1_0000001174104384](figures/en-us_image1_0000001174104384.png) 

en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

@@ -4,13 +4,7 @@ The **\<Canvas>** component can be used to customize drawings.
 
 > **NOTE**
 > 
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-
-## Required Permissions
-
-None
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 ## Child Components
 
@@ -36,7 +30,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 
 | Name                           | Parameter  | Description                  |
 | ----------------------------- | ---- | -------------------- |
-| onReady(event: () => void) | -   | Triggered when a canvas is ready. |
+| onReady(event: () => void) | -   | Triggered when the canvas is ready. |
 
 
 **Example**

en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

@@ -17,40 +17,41 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 
 **Parameters**
 
-  | Name    | Type    | Mandatory  | Default Value      | Description                          |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
+| Name    | Type    | Mandatory  | Default Value      | Description                          |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+| color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
 
 **Example**
 
   ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct Page45 {
-    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 grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
-            this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }}
+// xxx.ets
+@Entry
+@Component
+struct Page45 {
+  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 grad = this.context.createLinearGradient(50, 0, 300, 100)
+          grad.addColorStop(0.0, 'red')
+          grad.addColorStop(0.5, 'white')
+          grad.addColorStop(1.0, 'green')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 0, 500, 500)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
   ```
   ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
 

en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md

@@ -10,10 +10,10 @@ An **ImageBitmap** object stores pixel data rendered on a canvas.
 
 ## Attributes
 
-| Name| Type| Description| 
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Pixel width of the **ImageBitmap** object.| 
-| height | number | Pixel height of the **ImageBitmap** object.| 
+| width | number | Pixel width of the **ImageBitmap** object.|
+| height | number | Pixel height of the **ImageBitmap** object.|
 
 **Example**
 

en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

@@ -10,11 +10,11 @@ An **ImageData** object stores pixel data rendered on a canvas.
 
 ## Attributes
 
-| Name| Type| Description| 
+| Name| Type| Description|
 | -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels.| 
-| height | number | Actual height of the rectangle on the canvas, in pixels.| 
-| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| 
+| width | number | Actual width of the rectangle on the canvas, in pixels.|
+| height | number | Actual height of the rectangle on the canvas, in pixels.|
+| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
 
 **Example**
 

en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

@@ -27,19 +27,19 @@ loadAnimation(
 
 path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
 
-Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
+Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
 
 **Parameters**
 
-  | Name            | Type                         | Mandatory  | Description                                      |
-  | -------------- | --------------------------- | ---- | ---------------------------------------- |
-  | path           | string                      | Yes   | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
-  | container      | object                      | Yes   | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
-  | render         | string                      | Yes   | Rendering type. The value can only be **"canvas"**.                       |
-  | loop           | boolean \| number | No   | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
-  | autoplay       | boolean                     | No   | Whether to automatically play the animation. The default value is **true**.                       |
-  | name           | string                      | No   | Custom animation name. In later versions, the name can be used to reference and control the animation. The default value is null.       |
-  | initialSegment | [number, number]       | No   | Start frame and end frame of the animation, respectively.                |
+| Name            | Type                         | Mandatory  | Description                                      |
+| -------------- | --------------------------- | ---- | ---------------------------------------- |
+| path           | string                      | Yes   | Path of the animation resource file in the HAP file. The resource file must be in JSON format. Example: **path: "common/lottie/data.json"**|
+| container      | object                      | Yes   | Canvas drawing context. A **CanvasRenderingContext2D** object must be declared in advance.|
+| render         | string                      | Yes   | Rendering type. The value can only be **"canvas"**.                       |
+| loop           | boolean \| number | No   | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends; the default value is **true**. If the value is of the number type and is greater than or equal to 1, this parameter indicates the number of times the animation plays.|
+| autoplay       | boolean                     | No   | Whether to automatically play the animation.<br/>Default value: **true**                  |
+| name           | string                      | No   | Custom animation name. In later versions, the name can be used to reference and control the animation.<br/>Default value: null |
+| initialSegment | [number, number]       | No   | Start frame and end frame of the animation, respectively.                |
 
 
 ## lottie.destroy
@@ -50,9 +50,9 @@ Destroys the animation. This method must be called when a page exits. This metho
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description                                      |
-  | ---- | ------ | ---- | ---------------------------------------- |
-  | name | string | Yes   | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
+| Name  | Type    | Mandatory  | Description                                      |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | Yes   | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
 
 **Example** 
   ```ts
@@ -131,9 +131,9 @@ Plays a specified animation.
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description                                      |
-  | ---- | ------ | ---- | ---------------------------------------- |
-  | name | string | Yes   | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
+| Name  | Type    | Mandatory  | Description                                      |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | Yes   | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
 
 **Example**
 
@@ -150,9 +150,9 @@ Pauses a specified animation. The next time **lottie.play()** is called, the ani
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description                                      |
-  | ---- | ------ | ---- | ---------------------------------------- |
-  | name | string | Yes   | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
+| Name  | Type    | Mandatory  | Description                                      |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | Yes   | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
 **Example**
 
@@ -169,9 +169,9 @@ Pauses or plays a specified animation. This method is equivalent to the switchin
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description                                      |
-  | ---- | ------ | ---- | ---------------------------------------- |
-  | name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
+| Name  | Type    | Mandatory  | Description                                      |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
 **Example**
 
@@ -188,9 +188,9 @@ Stops the specified animation. The next time **lottie.play()** is called, the an
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description                                      |
-  | ---- | ------ | ---- | ---------------------------------------- |
-  | name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
+| Name  | Type    | Mandatory  | Description                                      |
+| ---- | ------ | ---- | ---------------------------------------- |
+| name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
 **Example**
 
@@ -207,10 +207,10 @@ Sets the playback speed of the specified animation.
 
 **Parameters**
 
-  | Name   | Type    | Mandatory  | Description                                      |
-  | ----- | ------ | ---- | ---------------------------------------- |
-  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
-  | name  | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
+| Name   | Type    | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---------------------------------------- |
+| speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
+| name  | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
 
 **Example**
 
@@ -227,10 +227,10 @@ Sets the direction in which the specified animation plays.
 
 **Parameters**
 
-  | Name       | Type                | Mandatory  | Description                                      |
-  | --------- | ------------------ | ---- | ---------------------------------------- |
-  | direction | AnimationDirection | Yes   | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
-  | name      | string             | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
+| Name       | Type                | Mandatory  | Description                                      |
+| --------- | ------------------ | ---- | ---------------------------------------- |
+| direction | AnimationDirection | Yes   | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
+| name      | string             | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
 
 **Example**
 
@@ -275,9 +275,9 @@ Plays an animation.
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description             |
-  | ---- | ------ | ---- | --------------- |
-  | name | string | No   | Name of the target animation. By default, the value is null.|
+| Name  | Type    | Mandatory  | Description             |
+| ---- | ------ | ---- | --------------- |
+| name | string | No   | Name of the target animation. By default, the value is null.|
 
 **Example**
 
@@ -294,9 +294,9 @@ Destroys an animation.
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description             |
-  | ---- | ------ | ---- | --------------- |
-  | name | string | No   | Name of the target animation. By default, the value is null.|
+| Name  | Type    | Mandatory  | Description             |
+| ---- | ------ | ---- | --------------- |
+| name | string | No   | Name of the target animation. By default, the value is null.|
 
 **Example**
 
@@ -313,9 +313,9 @@ Pauses an animation. When the **play** interface is called next time, the animat
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description             |
-  | ---- | ------ | ---- | --------------- |
-  | name | string | No   | Name of the target animation. By default, the value is null.|
+| Name  | Type    | Mandatory  | Description             |
+| ---- | ------ | ---- | --------------- |
+| name | string | No   | Name of the target animation. By default, the value is null.|
 
 **Example**
 
@@ -332,9 +332,9 @@ Pauses or plays an animation. This method is equivalent to the switching between
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description             |
-  | ---- | ------ | ---- | --------------- |
-  | name | string | No   | Name of the target animation. By default, the value is null.|
+| Name  | Type    | Mandatory  | Description             |
+| ---- | ------ | ---- | --------------- |
+| name | string | No   | Name of the target animation. By default, the value is null.|
 
 **Example**
 
@@ -351,9 +351,9 @@ Stops an animation. When the **play** interface is called next time, the animati
 
 **Parameters**
 
-  | Name  | Type    | Mandatory  | Description             |
-  | ---- | ------ | ---- | --------------- |
-  | name | string | No   | Name of the target animation. By default, the value is null.|
+| Name  | Type    | Mandatory  | Description             |
+| ---- | ------ | ---- | --------------- |
+| name | string | No   | Name of the target animation. By default, the value is null.|
 
 **Example**
 
@@ -370,9 +370,9 @@ Sets the playback speed of an animation.
 
 **Parameters**
 
-  | Name   | Type    | Mandatory  | Description                                      |
-  | ----- | ------ | ---- | ---------------------------------------- |
-  | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
+| Name   | Type    | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---------------------------------------- |
+| speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays forward. If the value is less than 0, the animation plays backward. If the value is 0, the animation is paused.|If the value is **1.0** or **-1.0**, the animation plays at the normal speed.|
 
 **Example**
 
@@ -389,9 +389,9 @@ Sets the playback direction of an animation.
 
 **Parameters**
 
-  | Name       | Type                | Mandatory  | Description                                      |
-  | --------- | ------------------ | ---- | ---------------------------------------- |
-  | direction | AnimationDirection | Yes   | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
+| Name       | Type                | Mandatory  | Description                                      |
+| --------- | ------------------ | ---- | ---------------------------------------- |
+| direction | AnimationDirection | Yes   | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1.|
 
 **Example**
 
@@ -408,11 +408,11 @@ Sets the animation to stop at the specified frame or time.
 
 **Parameters**
 
-  | Name     | Type     | Mandatory  | Description                                      |
-  | ------- | ------- | ---- | ---------------------------------------- |
-  | value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop.                    |
-  | isFrame | boolean | No   | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
-  | name    | string  | No   | Name of the target animation. By default, the value is null.                         |
+| Name     | Type     | Mandatory  | Description                                      |
+| ------- | ------- | ---- | ---------------------------------------- |
+| value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop.                    |
+| isFrame | boolean | No   | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress.<br/>Default value: **false** |
+| name    | string  | No   | Name of the target animation. By default, the value is null.                         |
 
 **Example**
 
@@ -432,11 +432,11 @@ Sets the animation to start from the specified frame or time progress.
 
 **Parameters**
 
-  | Name     | Type     | Mandatory  | Description                                      |
-  | ------- | ------- | ---- | ---------------------------------------- |
-  | value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start.                     |
-  | isFrame | boolean | Yes   | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
-  | name    | string  | No   | Name of the target animation. By default, the value is null.                         |
+| Name     | Type     | Mandatory  | Description                                      |
+| ------- | ------- | ---- | ---------------------------------------- |
+| value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start.                     |
+| isFrame | boolean | Yes   | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress.<br>Default value: **false** |
+| name    | string  | No   | Name of the target animation. By default, the value is null.                         |
 
 **Example**
 
@@ -456,10 +456,10 @@ Sets the animation to play only the specified segment.
 
 **Parameters**
 
-  | Name       | Type                                      | Mandatory  | Description                                      |
-  | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
-  | segments  | AnimationSegment = [number, number] \| AnimationSegment[] | Yes   | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
-  | forceFlag | boolean                                  | Yes   | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.          |
+| Name       | Type                                      | Mandatory  | Description                                      |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| segments  | AnimationSegment = [number, number] \| AnimationSegment[] | Yes   | Segment or segment list.<br>If all segments in the segment list are played, only the last segment is played in the next cycle.|
+| forceFlag | boolean                                  | Yes   | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.          |
 
 **Example**
 
@@ -479,9 +479,9 @@ Resets the settings configured by the **playSegments** method to play all the fr
 
 **Parameters**
 
-  | Name       | Type     | Mandatory  | Description                            |
-  | --------- | ------- | ---- | ------------------------------ |
-  | forceFlag | boolean | Yes   | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
+| Name       | Type     | Mandatory  | Description                            |
+| --------- | ------- | ---- | ------------------------------ |
+| forceFlag | boolean | Yes   | Whether the settings take effect immediately. The value **true** means the settings take effect immediately, and **false** means the settings take effect until the current cycle of playback is completed.|
 
 **Example**
 
@@ -511,9 +511,9 @@ Sets the precision of the **currentFrame** attribute to display floating-point n
 
 **Parameters**
 
-  | Name          | Type     | Mandatory  | Description                                      |
-  | ------------ | ------- | ---- | ---------------------------------------- |
-  | useSubFrames | boolean | Yes   | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
+| Name          | Type     | Mandatory  | Description                                      |
+| ------------ | ------- | ---- | ---------------------------------------- |
+| useSubFrames | boolean | Yes   | Whether the **currentFrame** attribute displays floating-point numbers. By default, the attribute displays floating-point numbers.<br>**true**: The **currentFrame** attribute displays floating-point numbers.<br>**false**: The **currentFrame** attribute displays an integer and does not display floating-point numbers.|
 
 **Example**
 
@@ -530,9 +530,9 @@ Obtains the duration (irrelevant to the playback speed) or number of frames for
 
 **Parameters**
 
-  | Name      | Type     | Mandatory  | Description                                      |
-  | -------- | ------- | ---- | ---------------------------------------- |
-  | inFrames | boolean | No   | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br>Default value: **false**|
+| Name      | Type     | Mandatory  | Description                                      |
+| -------- | ------- | ---- | ---------------------------------------- |
+| inFrames | boolean | No   | Whether to obtain the duration or number of frames.<br>**true**: number of frames.<br>**false**: duration, in ms.<br/>Default value: **false** |
 
 **Example**
 
@@ -549,10 +549,10 @@ Adds an event listener. After the event is complete, the specified callback func
 
 **Parameters**
 
-  | Name      | Type                             | Mandatory  | Description                                      |
-  | -------- | ------------------------------- | ---- | ---------------------------------------- |
-  | name     | AnimationEventName              | Yes   | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
-  | callback | AnimationEventCallback&lt;T&gt; | Yes   | Custom callback.                               |
+| Name      | Type                             | Mandatory  | Description                                      |
+| -------- | ------------------------------- | ---- | ---------------------------------------- |
+| name     | AnimationEventName              | Yes   | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
+| callback | AnimationEventCallback&lt;T&gt; | Yes   | Custom callback.                               |
 
 **Example**
 
@@ -575,10 +575,10 @@ Removes an event listener.
 
 **Parameters**
 
-  | Name      | Type                             | Mandatory  | Description                                      |
-  | -------- | ------------------------------- | ---- | ---------------------------------------- |
-  | name     | AnimationEventName              | Yes   | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
-  | callback | AnimationEventCallback&lt;T&gt; | No   | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed.           |
+| Name      | Type                             | Mandatory  | Description                                      |
+| -------- | ------------------------------- | ---- | ---------------------------------------- |
+| name     | AnimationEventName              | Yes   | Animation event type. The available options are as follows:<br>'enterFrame', 'loopComplete', 'complete', 'segmentStart', 'destroy', 'config_ready', 'data_ready', 'DOMLoaded', 'error', 'data_failed', 'loaded_images'|
+| callback | AnimationEventCallback&lt;T&gt; | Yes   | Custom callback. By default, the value is null, meaning that all callbacks of the event will be removed.           |
 
 **Example**
 
@@ -595,10 +595,10 @@ Directly triggers all configured callbacks of a specified event.
 
 **Parameters**
 
-  | Name  | Type                | Mandatory  | Description       |
-  | ---- | ------------------ | ---- | --------- |
-  | name | AnimationEventName | Yes   | Animation event type. |
-  | args | any                | Yes   | Custom callback parameters.|
+| Name  | Type                | Mandatory  | Description       |
+| ---- | ------------------ | ---- | --------- |
+| name | AnimationEventName | Yes   | Animation event type. |
+| args | any                | Yes   | Custom callback parameters.|
 
 **Example**
 

en/application-dev/reference/arkui-ts/ts-container-gridcontainer.md

 # GridContainer
 
+The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-The **&lt;GridContainer&gt;** component lays out components vertically. It is used only in the grid layout.
-
-
-## Required Permissions
-
-None
+>  **NOTE**
+>
+>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
 
-GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
+GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
 
-- Parameter
-    | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | columns | number \| 'auto' | No | 'auto' | Total number of columns in the current layout. |
-  | sizeType | SizeType | No | SizeType.Auto | Device size type. |
-  | gutter | Length | No | - | Gutter of the grid layout. |
-  | margin | Length | No | - | Margin of the grid layout. |
+**Parameters**
 
-- SizeType enums
-    | Name | Description | 
-  | -------- | -------- |
-  | XS | Device of the minimum size. | 
-  | SM | Small-sized device. | 
-  | MD | Medium-sized device. | 
-  | LG | Large-sized device. | 
-  | Auto | Auto. The size type is selected based on the device type. | 
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
+| sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
+| gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. |
+| margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. |
+
+## SizeType
+
+| Name| Description|
+| -------- | -------- |
+| XS | Device of the minimum size.|
+| SM | Small-sized device.|
+| MD | Medium-sized device.|
+| LG | Large-sized device.|
+| Auto | Auto. The size type is selected based on the device type.|
 
 
 ## Attributes
 
-Universal attributes and [attributes](ts-container-column.md#attributes) of the **&lt;Column&gt;** component are supported.
+The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
 
 
 ## Events
 
-Universal events are supported.
+The universal events are supported.
 
 
 ## Example
 
-
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample {

en/application-dev/reference/arkui-ts/ts-container-scroll.md

@@ -4,7 +4,9 @@ The **\<Scroll>** component scrolls the content when the layout size of a compon
 
 >  **NOTE**
 >  - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
->  - The prerequisite for the component to rebound is that the component is scrolled.
+>  - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**.
+>  - This component can scroll only when the size on the main axis is less than the content size.
+>  - This component can produce a bounce effect only when there is more than one screen of content.
 
 
 ## Child Components
@@ -22,11 +24,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name            | Type                                    | Description       |
 | -------------- | ---------------------------------------- | --------- |
-| scrollable     | ScrollDirection                          | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
-| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**|
-| scrollBarColor | string \| number \| Color   | Color of the scrollbar.|
+| scrollable     | [ScrollDirection](#scrolldirection)                        | Scroll direction.<br>Default value: **ScrollDirection.Vertical**|
+| scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Auto**|
+| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color)   | Color of the scrollbar.|
 | scrollBarWidth | string \| number         | Width of the scrollbar.|
-| edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
+| edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
 
 ## ScrollDirection
 | Name      | Description                    |
@@ -34,15 +36,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Horizontal | Only horizontal scrolling is supported.    |
 | Vertical   | Only vertical scrolling is supported.    |
 | None       | Scrolling is disabled.              |
-| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.|
+| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9.|
 
 ## Events
 
-| Name                                                        | Description                                                  |
-| ----------------------------------------------------------- | ------------------------------------------------------------ |
-| onScroll(event: (xOffset: number, yOffset: number) => void) | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs. |
-| onScrollEdge(event: (side: Edge) => void)                   | Invoked when scrolling reaches the edge.                     |
-| onScrollEnd(event: () => void)                              | Invoked when scrolling stops.                                |
+| Name                                                        | Description                                                    |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onScrollBegin<sup>9+</sup>(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | Invoked when scrolling starts.<br>Parameters:<br>- **dx**: amount to scroll by in the horizontal direction.<br>- **dy**: amount to scroll by in the vertical direction.<br>Return value:<br>- **dxRemain**: remaining amount to scroll by in the horizontal direction.<br>- **dyRemain**: remaining amount to scroll by in the vertical direction.|
+| onScroll(event: (xOffset: number, yOffset: number) => void)  | Invoked to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.         |
+| onScrollEdge(event: (side: Edge) => void)                    | Invoked when scrolling reaches the edge.                                        |
+| onScrollEnd(event: () => void)                               | Invoked when scrolling stops.                                          |
+
+>  **NOTE**
+>
+>  If the **onScrollBegin** event and **scrollBy** API are used to implement nested scrolling, you must set **edgeEffect** of the scrolling child node to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, the **edgeEffect** attribute of the **\<List>** must be set to **EdgeEffect.None**.
 
 ## Scroller
 
@@ -67,18 +74,24 @@ Scrolls to the specified position.
 
 | Name   | Type                                                    | Mandatory| Description                                                    |
 | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| xOffset   | number \| string                                                       | Yes  | Horizontal scrolling offset.                                              |
-| yOffset   | number \| string                                                       | Yes  | Vertical scrolling offset.                                              |
-| animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
+| xOffset   | Length                                                       | Yes  | Horizontal scrolling offset.                                              |
+| yOffset   | Length                                                       | Yes  | Vertical scrolling offset.                                              |
+| animation | {<br>duration: number,<br>curve: [Curve](ts-animatorproperty.md)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.|
 
 
 ### scrollEdge
 
-scrollEdge(value: [Edge](ts-appendix-enums.md#edge)): void
+scrollEdge(value: Edge): void
 
 
 Scrolls to the edge of the container.
 
+**Parameters**
+
+| Name  | Type| Mandatory  | Description     |
+| ----- | ---- | ---- | --------- |
+| value | [Edge](ts-appendix-enums.md#edge) | Yes   | Edge position to scroll to.|
+
 
 ### scrollPage
 
@@ -91,7 +104,7 @@ Scrolls to the next or previous page.
 | Name      | Type   | Mandatory  | Description                          |
 | --------- | ------- | ---- | ------------------------------ |
 | next      | boolean | Yes   | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
-| direction | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.               |
+| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9.               |
 
 
 ### currentOffset
@@ -101,6 +114,13 @@ currentOffset()
 
 Obtains the scrolling offset.
 
+**Return value**
+
+| Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- |
+| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.|
+
+
 ### scrollToIndex
 
 scrollToIndex(value: number): void
@@ -120,15 +140,36 @@ Scrolls to the item with the specified index.
 | value  | number   | Yes  | Index of the item to be scrolled to in the list.|
 
 
+### scrollBy<sup>9+</sup>
+
+scrollBy(dx: Length, dy: Length): void
+
+
+Scrolls by the specified amount.
+
+
+>  **NOTE**
+>
+>  Only the **\<Scroll>** component is supported.
+
+**Parameters**
+
+| Name  | Type  | Mandatory  | Description             |
+| ----- | ------ | ---- | ----------------- |
+| dx | Length | Yes   | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
+| dy | Length | Yes   | Amount to scroll by in the vertical direction. The percentage format is not supported.|
+
+
 ## Example
+### Example 1
 
 ```ts
 // xxx.ets
 @Entry
 @Component
 struct ScrollExample {
-  scroller: Scroller = new Scroller()
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  scroller: Scroller = new Scroller();
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
   build() {
     Stack({ alignContent: Alignment.TopStart }) {
@@ -146,38 +187,99 @@ struct ScrollExample {
           }, item => item)
         }.width('100%')
       }
-      .scrollable(ScrollDirection.Vertical)
-      .scrollBar(BarState.On)
-      .scrollBarColor(Color.Gray)
-      .scrollBarWidth(30)
+      .scrollable(ScrollDirection.Vertical)  // The scrollbar scrolls in the vertical direction.
+      .scrollBar(BarState.On)  // The scrollbar is always displayed.
+      .scrollBarColor(Color.Gray)  // Color of the scrollbar.
+      .scrollBarWidth(30) // Width of the scrollbar.
+      .edgeEffect(EdgeEffect.None)
       .onScroll((xOffset: number, yOffset: number) => {
-        console.info(xOffset + ' ' + yOffset)
+        console.info(xOffset + ' ' + yOffset);
       })
       .onScrollEdge((side: Edge) => {
-        console.info('To the edge')
+        console.info('To the edge');
       })
       .onScrollEnd(() => {
-        console.info('Scroll Stop')
+        console.info('Scroll Stop');
       })
 
+      Button('scroll 150')
+        .onClick(() => { // Click to scroll down to 150.0 vp.
+          this.scroller.scrollBy(0,150);
+        })
+        .margin({ top: 10, left: 20 })
       Button('scroll 100')
         .onClick(() => { // Click to scroll down by 100.0 vp.
-          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
+          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
         })
-        .margin({ top: 10, left: 20 })
+        .margin({ top: 60, left: 20 })
       Button('back top')
         .onClick(() => { // Click to go back to the top.
-          this.scroller.scrollEdge(Edge.Top)
+          this.scroller.scrollEdge(Edge.Top);
         })
-        .margin({ top: 60, left: 20 })
+        .margin({ top: 110, left: 20 })
       Button('next page')
         .onClick(() => { // Click to go to the next page.
-          this.scroller.scrollPage({ next: true })
+          this.scroller.scrollPage({ next: true });
         })
-        .margin({ top: 110, left: 20 })
+        .margin({ top: 170, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }
 ```
 
 ![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
+
+### Example 2
+```ts
+@Entry
+@Component
+struct NestedScroll {
+  @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list.
+  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  private scroller: Scroller = new Scroller();
+
+  build() {
+    Flex() {
+      Scroll(this.scroller) {
+        Column() {
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+
+          List({ space: 20 }) {
+            ForEach(this.arr, (item) => {
+              ListItem() {
+                Text("ListItem" + item)
+                  .width("100%").height("100%").borderRadius(15)
+                  .fontSize(16).textAlign(TextAlign.Center).backgroundColor(Color.White)
+              }.width("100%").height(100)
+            }, item => item)
+          }
+          .width("100%").height("50%").edgeEffect(EdgeEffect.None)
+          .onReachStart(() => {
+            this.listPosition = 0;
+          })
+          .onReachEnd(() => {
+            this.listPosition = 2;
+          })
+          .onScrollBegin((dx: number, dy: number) => {
+            if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
+              this.scroller.scrollBy(0, -dy);
+              return { dxRemain: dx, dyRemain: 0 };
+            }
+            this.listPosition = 1;
+            return { dxRemain: dx, dyRemain: dy };
+          })
+
+          Text("Scroll Area")
+            .width("100%").height("40%").backgroundColor(0X330000FF)
+            .fontSize(16).textAlign(TextAlign.Center)
+        }
+      }
+      .width("100%").height("100%")
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+  }
+}
+```
+
+![NestedScroll](figures/NestedScroll.gif)

en/application-dev/reference/arkui-ts/ts-gesture-settings.md

@@ -137,4 +137,4 @@ struct GestureSettingsExample {
 }
 ```
 
-![en-us_image_0000001257058419](figures/en-us_image_0000001257058419.gif)
+![zh-cn_image_0000001210195016](figures/zh-cn_image_0000001210195016.gif)

en/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

 # Time Picker Dialog Box
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
-
 You can display a time picker in a dialog box to allow users to select a time from the given range, which is from 00:00 to 23:59 by default.
 
-## Required Permissions
-
-None
+>  **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.
 
 ## TimePickerDialog.show
 
@@ -16,22 +13,23 @@ show(options?: TimePickerDialogOptions)
 Defines and displays a time picker dialog box.
 
 - options parameters
-  | Name| Type| Mandatory| Default Value| Description|
-  | -------- | -------- | -------- | -------- | -------- |
-  | selected | Date | No| Current system time| Time of the selected item.|
-  | useMilitaryTime | boolean | No| false | Whether to display time in 24-hour format.|
-  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the OK button in the dialog box is clicked.|
-  | onCancel | () => void | No| - | Triggered when the Cancel button in the dialog box is clicked.|
-  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| - | Triggered when the selected item in the picker changes.|
+  | Name| Type| Mandatory| Description|
+  | -------- | -------- | -------- | -------- |
+  | selected | Date | No| Selected time.<br>Default value: current system time|
+  | useMilitaryTime | boolean | No| Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**|
+  | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.|
+  | onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.|
+  | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult)) => void | No| Callback invoked when the selected time changes.|
 
 ## Example
 
 ### Time Picker Sample Code (24-Hour Clock)
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample01 {
-  @State isUseMilitaryTime: boolean = true
+  @State isUseMilitaryTime: boolean = true;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -40,13 +38,13 @@ struct TimePickerDialogExample01 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })
@@ -54,12 +52,16 @@ struct TimePickerDialogExample01 {
   }
 }
 ```
+  ![en-us_image_0000001118642010](figures/en-us_image_0000001118642010.gif)  
+
 ### Time Picker Sample Code (12-Hour Clock)
-```
+
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample02 {
-  @State isUseMilitaryTime: boolean = false
+  @State isUseMilitaryTime: boolean = false;
 
   build() {
     Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
@@ -68,13 +70,13 @@ struct TimePickerDialogExample02 {
         TimePickerDialog.show({
           useMilitaryTime: this.isUseMilitaryTime,
           onAccept: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
           },
           onCancel: () => {
-            console.info("TimePickerDialog:onCancel()")
+            console.info("TimePickerDialog:onCancel()");
           },
           onChange: (value: TimePickerResult) => {
-            console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
+            console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
           }
         })
       })
@@ -82,3 +84,5 @@ struct TimePickerDialogExample02 {
   }
 }
 ```
+
+ ![en-us_image_0000001118642020](figures/en-us_image_0000001118642020.gif)  
\ No newline at end of file

en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -32,7 +32,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
 | [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'**|
+| [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**|
@@ -78,7 +78,7 @@ struct FillStyleExample {
 }
 ```
 
-![en-us_image_0000001211898510](figures/en-us_image_0000001211898510.png)
+![en-us_image_0000001193872516](figures/en-us_image_0000001193872516.png)
 
 
 ### lineWidth
@@ -111,7 +111,7 @@ struct LineWidthExample {
 }
 ```
 
-![en-us_image_0000001257058439](figures/en-us_image_0000001257058439.png)
+![en-us_image_0000001238832403](figures/en-us_image_0000001238832403.png)
 
 
 ### strokeStyle
@@ -145,7 +145,7 @@ struct StrokeStyleExample {
 }
 ```
 
-![en-us_image_0000001257058429](figures/en-us_image_0000001257058429.png)
+![en-us_image_0000001238712437](figures/en-us_image_0000001238712437.png)
 
 
 ### lineCap
@@ -182,7 +182,7 @@ struct LineCapExample {
 }
 ```
 
-![en-us_image_0000001256858427](figures/en-us_image_0000001256858427.png)
+![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG)
 
 
 ### lineJoin
@@ -220,7 +220,7 @@ struct LineJoinExample {
 }
 ```
 
-![en-us_image_0000001256858429](figures/en-us_image_0000001256858429.png)
+![en-us_image_0000001194352450](figures/en-us_image_0000001194352450.png)
 
 
 ### miterLimit
@@ -258,7 +258,7 @@ struct MiterLimit {
 }
 ```
 
-![en-us_image_0000001212218472](figures/en-us_image_0000001212218472.png)
+![en-us_image_0000001238952397](figures/en-us_image_0000001238952397.png)
 
 
 ### font
@@ -291,7 +291,7 @@ struct Fonts {
 }
 ```
 
-![en-us_image_0000001211898508](figures/en-us_image_0000001211898508.png)
+![en-us_image_0000001194032476](figures/en-us_image_0000001194032476.png)
 
 
 ### textAlign
@@ -339,7 +339,7 @@ struct CanvasExample {
 }
 ```
 
-![en-us_image_0000001257138377](figures/en-us_image_0000001257138377.png)
+![en-us_image_0000001239032423](figures/en-us_image_0000001239032423.png)
 
 
 ### textBaseline
@@ -387,7 +387,7 @@ struct TextBaseline {
 }
 ```
 
-![en-us_image_0000001256978375](figures/en-us_image_0000001256978375.png)
+![en-us_image_0000001193872518](figures/en-us_image_0000001193872518.png)
 
 
 ### globalAlpha
@@ -423,7 +423,7 @@ struct GlobalAlpha {
 }
 ```
 
-![en-us_image_0000001211898506](figures/en-us_image_0000001211898506.png)
+![en-us_image_0000001238832405](figures/en-us_image_0000001238832405.png)
 
 
 ### lineDashOffset
@@ -458,7 +458,7 @@ struct LineDashOffset {
 }
 
 ```
-![en-us_image_0000001212058506](figures/en-us_image_0000001212058506.png)
+![en-us_image_0000001238712439](figures/en-us_image_0000001238712439.png)
 
 
 ### globalCompositeOperation
@@ -513,7 +513,7 @@ struct GlobalCompositeOperation {
 }
 ```
 
-![en-us_image_0000001212218474](figures/en-us_image_0000001212218474.png)
+![en-us_image_0000001194192456](figures/en-us_image_0000001194192456.png)
 
 
 ### shadowBlur
@@ -548,7 +548,7 @@ struct ShadowBlur {
 }
 ```
 
-![en-us_image_0000001211898514](figures/en-us_image_0000001211898514.png)
+![en-us_image_0000001194352452](figures/en-us_image_0000001194352452.png)
 
 
 ### shadowColor
@@ -583,7 +583,7 @@ struct ShadowColor {
 }
 ```
 
-![en-us_image_0000001212058502](figures/en-us_image_0000001212058502.png)
+![en-us_image_0000001238952399](figures/en-us_image_0000001238952399.png)
 
 
 ### shadowOffsetX
@@ -619,7 +619,7 @@ struct ShadowOffsetX {
 }
 ```
 
-![en-us_image_0000001257138379](figures/en-us_image_0000001257138379.png)
+![en-us_image_0000001194032478](figures/en-us_image_0000001194032478.png)
 
 
 ### shadowOffsetY
@@ -655,7 +655,7 @@ struct ShadowOffsetY {
 }
 ```
 
-![en-us_image_0000001257058427](figures/en-us_image_0000001257058427.png)
+![en-us_image_0000001239032425](figures/en-us_image_0000001239032425.png)
 
 
 ### imageSmoothingEnabled
@@ -689,7 +689,7 @@ struct ImageSmoothingEnabled {
 }
 ```
 
-![en-us_image_0000001257138385](figures/en-us_image_0000001257138385.png)
+![en-us_image_0000001193872520](figures/en-us_image_0000001193872520.png)
 
 
 ## Methods
@@ -703,7 +703,7 @@ Fills a rectangle on the canvas.
 
  **Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description           |
+| 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.|
@@ -739,7 +739,7 @@ Fills a rectangle on the canvas.
   }
   ```
 
-  ![en-us_image_0000001257138375](figures/en-us_image_0000001257138375.png)
+  ![en-us_image_0000001194192436](figures/en-us_image_0000001194192436.png)
 
 
 ### strokeRect
@@ -748,16 +748,16 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 Draws an outlined rectangle on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description          |
+| Name | Type    | Mandatory  | Default Value | Description          |
 | ------ | ------ | ---- | ---- | ------------ |
 | x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
 | y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
 | width  | number | Yes   | 0    | Width of the rectangle.    |
 | height | number | Yes   | 0    | Height of the rectangle.    |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -786,7 +786,7 @@ Draws an outlined rectangle on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212378436](figures/en-us_image_0000001212378436.png)
+  ![en-us_image_0000001194352436](figures/en-us_image_0000001194352436.png)
 
 
 ### clearRect
@@ -795,16 +795,16 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 Clears the content in a rectangle on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description           |
+| Name | Type    | Mandatory  | Default Value | Description           |
 | ------ | ------ | ---- | ---- | ------------- |
 | x      | number | Yes   | 0    | X-coordinate of the upper left corner of the rectangle.|
 | y      | number | Yes   | 0    | Y-coordinate of the upper left corner of the rectangle.|
 | width  | number | Yes   | 0    | Width of the rectangle.     |
 | height | number | Yes   | 0    | Height of the rectangle.     |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -835,7 +835,7 @@ Clears the content in a rectangle on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212058500](figures/en-us_image_0000001212058500.png)
+  ![en-us_image_0000001238952377](figures/en-us_image_0000001238952377.png)
 
 
 ### fillText
@@ -846,14 +846,14 @@ Draws filled text on the canvas.
 
 **Parameters**
 
-| Name      | Type    | Mandatory  | Default Value | Description             |
+| Name  | Type    | Mandatory  | Default Value | Description             |
 | -------- | ------ | ---- | ---- | --------------- |
 | text     | string | Yes   | ""   | Text to draw.     |
 | x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
 | y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
 | maxWidth | number | No   | -    | Maximum width allowed for the text.   |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -883,7 +883,7 @@ Draws filled text on the canvas.
   }
   ```
 
-  ![en-us_image_0000001257058437](figures/en-us_image_0000001257058437.png)
+  ![en-us_image_0000001194032458](figures/en-us_image_0000001194032458.png)
 
 
 ### strokeText
@@ -894,14 +894,14 @@ Draws a text stroke on the canvas.
 
 **Parameters**
 
-| Name      | Type    | Mandatory  | Default Value | Description             |
+| Name  | Type    | Mandatory  | Default Value | Description             |
 | -------- | ------ | ---- | ---- | --------------- |
 | text     | string | Yes   | ""   | Text to draw.     |
 | x        | number | Yes   | 0    | X-coordinate of the lower left corner of the text.|
 | y        | number | Yes   | 0    | Y-coordinate of the lower left corner of the text.|
 | maxWidth | number | No   | -    | Maximum width of the text to be drawn. |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -931,7 +931,7 @@ Draws a text stroke on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212218466](figures/en-us_image_0000001212218466.png)
+  ![en-us_image_0000001238952401](figures/en-us_image_0000001238952401.png)
 
 
 ### measureText
@@ -940,13 +940,13 @@ measureText(text: string): TextMetrics
 
 Returns a **TextMetrics** object used to obtain the width of specified text.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description        |
+| Name | Type    | Mandatory  | Default Value | Description        |
 | ---- | ------ | ---- | ---- | ---------- |
 | text | string | Yes   | ""   | Text to be measured.|
 
- **Return value**
+**Return value**
 
 | Type         | Description     |
 | ----------- | ------- |
@@ -970,7 +970,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
 | hangingBaseline          | number | Distance from the horizontal line specified by the **CanvasRenderingContext2D.textBaseline** attribute to the hanging baseline of the line box. The current value is **0**.|
 | ideographicBaseline      | number | Distance from the horizontal line indicated by the **CanvasRenderingContext2D.textBaseline** attribute to the ideographic baseline of the line box. The current value is **0**.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1001,7 +1001,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
   }
   ```
 
-  ![en-us_image_0000001256858431](figures/en-us_image_0000001256858431.png)
+  ![en-us_image_0000001194032480](figures/en-us_image_0000001194032480.png)
 
 
 ### stroke
@@ -1010,14 +1010,14 @@ stroke(path?: Path2D): void
 
 Strokes a path.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type                                      | Mandatory  | Default Value | Description          |
+| Name | Type                                      | Mandatory  | Default Value | Description          |
 | ---- | ---------------------------------------- | ---- | ---- | ------------ |
 | path | [Path2D](ts-components-canvas-path2d.md) | No   | null | A **Path2D** path to draw.|
 
- **Example**
- 
+**Example**
+
   ```ts
   // xxx.ets
   @Entry
@@ -1050,7 +1050,7 @@ Strokes a path.
   }
   ```
 
-  ![en-us_image_0000001257138373](figures/en-us_image_0000001257138373.png)
+  ![en-us_image_0000001238832389](figures/en-us_image_0000001238832389.png)
 
 
 ### beginPath
@@ -1059,7 +1059,7 @@ beginPath(): void
 
 Creates a drawing path.
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1093,7 +1093,7 @@ Creates a drawing path.
   }
   ```
 
-  ![en-us_image_0000001212378440](figures/en-us_image_0000001212378440.png)
+  ![en-us_image_0000001193872522](figures/en-us_image_0000001193872522.png)
 
 
 ### moveTo
@@ -1102,14 +1102,14 @@ moveTo(x: number, y: number): void
 
 Moves a drawing path to a target position on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description       |
+| Name | Type    | Mandatory  | Default Value | Description       |
 | ---- | ------ | ---- | ---- | --------- |
 | x    | number | Yes   | 0    | X-coordinate of the target position.|
 | y    | number | Yes   | 0    | Y-coordinate of the target position.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1141,7 +1141,7 @@ Moves a drawing path to a target position on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212058498](figures/en-us_image_0000001212058498.png)
+  ![en-us_image_0000001238832409](figures/en-us_image_0000001238832409.png)
 
 
 ### lineTo
@@ -1150,14 +1150,14 @@ lineTo(x: number, y: number): void
 
 Connects the current point to a target position using a straight line.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description       |
+| Name | Type    | Mandatory  | Default Value | Description       |
 | ---- | ------ | ---- | ---- | --------- |
 | x    | number | Yes   | 0    | X-coordinate of the target position.|
 | y    | number | Yes   | 0    | Y-coordinate of the target position.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1189,7 +1189,7 @@ Connects the current point to a target position using a straight line.
   }
   ```
 
-  ![en-us_image_0000001257058435](figures/en-us_image_0000001257058435.png)
+  ![en-us_image_0000001238712443](figures/en-us_image_0000001238712443.png)
 
 
 ### closePath
@@ -1198,7 +1198,7 @@ closePath(): void
 
 Draws a closed path.
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1232,7 +1232,7 @@ Draws a closed path.
   }
   ```
 
-  ![en-us_image_0000001257058431](figures/en-us_image_0000001257058431.png)
+  ![en-us_image_0000001194192460](figures/en-us_image_0000001194192460.png)
 
 
 ### createPattern
@@ -1243,7 +1243,7 @@ Creates a pattern for image filling based on a specified source image and repeti
 
 **Parameters**
 
-| Name        | Type                                      | Mandatory  | Default Value | Description                                      |
+| 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"**.|
@@ -1254,7 +1254,7 @@ Creates a pattern for image filling based on a specified source image and repeti
 | ------------------------------- | ----------------------- |
 | [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1286,7 +1286,7 @@ Creates a pattern for image filling based on a specified source image and repeti
   }
   ```
 
-  ![en-us_image_0000001257138387](figures/en-us_image_0000001257138387.png)
+  ![en-us_image_0000001194352456](figures/en-us_image_0000001194352456.png)
 
 
 ### bezierCurveTo
@@ -1295,9 +1295,9 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 Draws a cubic bezier curve on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description            |
+| 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.|
@@ -1306,7 +1306,7 @@ Draws a cubic bezier curve on the canvas.
 | 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**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1338,7 +1338,7 @@ Draws a cubic bezier curve on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212378442](figures/en-us_image_0000001212378442.png)
+  ![en-us_image_0000001238952403](figures/en-us_image_0000001238952403.png)
 
 
 ### quadraticCurveTo
@@ -1347,16 +1347,16 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 Draws a quadratic curve on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description         |
+| 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**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1388,7 +1388,7 @@ Draws a quadratic curve on the canvas.
   }
   ```
 
-  ![en-us_image_0000001256978383](figures/en-us_image_0000001256978383.png)
+  ![en-us_image_0000001194032482](figures/en-us_image_0000001194032482.png)
 
 
 ### arc
@@ -1397,9 +1397,9 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 Draws an arc on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name              | Type     | Mandatory  | Default Value  | Description        |
+| 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.|
@@ -1408,7 +1408,7 @@ Draws an arc on the canvas.
 | endAngle         | number  | Yes   | 0     | End radian of the arc.  |
 | counterclockwise | boolean | No   | false | Whether to draw the arc counterclockwise.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1439,7 +1439,7 @@ Draws an arc on the canvas.
   }
   ```
 
-  ![en-us_image_0000001212378430](figures/en-us_image_0000001212378430.png)
+  ![en-us_image_0000001239032429](figures/en-us_image_0000001239032429.png)
 
 
 ### arcTo
@@ -1448,9 +1448,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 Draws an arc based on the radius and points on the arc.
 
- **Parameters**
+**Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description             |
+| 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.|
@@ -1458,7 +1458,7 @@ Draws an arc based on the radius and points 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**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1489,7 +1489,7 @@ Draws an arc based on the radius and points on the arc.
   }
   ```
 
-  ![en-us_image_0000001257138383](figures/en-us_image_0000001257138383.png)
+  ![en-us_image_0000001193872524](figures/en-us_image_0000001193872524.png)
 
 
 ### ellipse
@@ -1498,9 +1498,9 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 Draws an ellipse in the specified rectangular region on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name              | Type     | Mandatory  | Default Value  | Description               |
+| 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.       |
@@ -1509,9 +1509,9 @@ Draws an ellipse in the specified rectangular region on the canvas.
 | 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 in the counterclockwise direction.    |
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.    |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1541,7 +1541,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
   }
   ```
 
-  ![en-us_image_0000001256858423](figures/en-us_image_0000001256858423.png)
+  ![en-us_image_0000001194192440](figures/en-us_image_0000001194192440.png)
 
 
 ### rect
@@ -1550,16 +1550,16 @@ rect(x: number, y: number, w: number, h: number): void
 
 Creates a rectangle on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description           |
+| 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**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1589,7 +1589,7 @@ Creates a rectangle on the canvas.
   }
   ```
 
-  ![en-us_image_0000001257138381](figures/en-us_image_0000001257138381.png)
+  ![en-us_image_0000001238712445](figures/en-us_image_0000001238712445.png)
 
 
 ### fill
@@ -1600,7 +1600,7 @@ Fills the area inside a closed path on the canvas.
 
 **Parameters**
 
-| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| Name  | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
 | fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
 
@@ -1632,7 +1632,7 @@ Fills the area inside a closed path on the canvas.
   }
   ```
 
-  ![en-us_image_0000001256858421](figures/en-us_image_0000001256858421.png)
+  ![en-us_image_0000001194192462](figures/en-us_image_0000001194192462.png)
 
 
 fill(path: Path2D, fillRule?: CanvasFillRule): void
@@ -1641,7 +1641,7 @@ Fills the area inside a closed path on the canvas.
 
 **Parameters**
 
-| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| Name  | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
 | path     | Path2D         | Yes   |           | A **Path2D** path to fill.                             |
 | fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to fill.<br>The options are **"nonzero"** and **"evenodd"**.|
@@ -1698,11 +1698,11 @@ Sets the current path to a clipping path.
 
 **Parameters**
 
-| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| Name  | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
 | fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1735,7 +1735,7 @@ Sets the current path to a clipping path.
   }
   ```
 
-  ![en-us_image_0000001257058441](figures/en-us_image_0000001257058441.png)
+  ![en-us_image_0000001194032462](figures/en-us_image_0000001194032462.png)
 
 
 clip(path:Path2D, fillRule?: CanvasFillRule): void
@@ -1744,12 +1744,12 @@ Sets a closed path to a clipping path.
 
 **Parameters**
 
-| Name      | Type            | Mandatory  | Default Value      | Description                                      |
+| Name  | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
 | path | Path2D | Yes   |  | A **Path2D** path to clip.|
 | fillRule | CanvasFillRule | No   | "nonzero" | Rule by which to determine whether a point is inside or outside the area to clip.<br>The options are **"nonzero"** and **"evenodd"**.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1795,7 +1795,7 @@ Sets a filter for the image on the canvas. This API is a void API.
 
 **Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description          |
+| Name | Type    | Mandatory  | Default Value | Description          |
 | ------ | ------ | ---- | ---- | ------------ |
 | filter | string | Yes   | -    | Functions that accept various filter effects.|
 
@@ -1827,13 +1827,13 @@ rotate(angle: number): void
 
 Rotates a canvas clockwise around its coordinate axes.
 
- **Parameters**
+**Parameters**
 
-| Name   | Type    | Mandatory  | Default Value | Description                                      |
+| Name | Type    | Mandatory  | Default Value | Description                                      |
 | ----- | ------ | ---- | ---- | ---------------------------------------- |
 | angle | number | Yes   | 0    | Clockwise rotation angle. You can use **Math.PI / 180** to convert the angle to a radian.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1863,7 +1863,7 @@ Rotates a canvas clockwise around its coordinate axes.
   }
   ```
 
-  ![en-us_image_0000001212218478](figures/en-us_image_0000001212218478.png)
+  ![en-us_image_0000001238952405](figures/en-us_image_0000001238952405.png)
 
 
 ### scale
@@ -1872,14 +1872,14 @@ scale(x: number, y: number): void
 
 Scales the canvas based on scale factors.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description         |
+| Name | Type    | Mandatory  | Default Value | Description         |
 | ---- | ------ | ---- | ---- | ----------- |
 | x    | number | Yes   | 0    | Horizontal scale factor.|
 | y    | number | Yes   | 0    | Vertical scale factor.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1911,7 +1911,7 @@ Scales the canvas based on scale factors.
   }
   ```
 
-  ![en-us_image_0000001211898516](figures/en-us_image_0000001211898516.png)
+  ![en-us_image_0000001193872498](figures/en-us_image_0000001193872498.png)
 
 
 ### transform
@@ -1939,7 +1939,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
 | e    | number | Yes   | 0    | X-axis translation.|
 | f    | number | Yes   | 0    | Y-axis translation.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -1975,7 +1975,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
   }
   ```
 
-  ![en-us_image_0000001212378438](figures/en-us_image_0000001212378438.png)
+  ![en-us_image_0000001239032431](figures/en-us_image_0000001239032431.png)
 
 
 ### setTransform
@@ -1986,7 +1986,7 @@ Resets the existing transformation matrix and creates a new transformation matri
 
 **Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description                  |
+| Name | Type    | Mandatory  | Default Value | Description                  |
 | ---- | ------ | ---- | ---- | -------------------- |
 | a    | number | Yes   | 0    | X-axis scale.    |
 | b    | number | Yes   | 0    | X-axis skew.     |
@@ -1995,7 +1995,7 @@ Resets the existing transformation matrix and creates a new transformation matri
 | e    | number | Yes   | 0    | X-axis translation.|
 | f    | number | Yes   | 0    | Y-axis translation.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2031,22 +2031,20 @@ Resets the existing transformation matrix and creates a new transformation matri
   ![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png)
 
 
-### translate
-
 ### translate
 
 translate(x: number, y: number): void
 
 Moves the origin of the coordinate system.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description      |
+| Name | Type    | Mandatory  | Default Value | Description      |
 | ---- | ------ | ---- | ---- | -------- |
 | x    | number | Yes   | 0    | X-axis translation.|
 | y    | number | Yes   | 0    | Y-axis translation.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2090,9 +2088,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
 
 Draws an image on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name   | Type                                      | Mandatory  | Default Value | Description                           |
+| Name | Type                                      | Mandatory  | Default Value | Description                           |
 | ----- | ---------------------------------------- | ---- | ---- | ----------------------------- |
 | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes   | null | Image resource. For details, see **ImageBitmap** or **PixelMap**.|
 | sx    | number                                   | No   | 0    | X-coordinate of the upper left corner of the rectangle used to crop the source image.         |
@@ -2104,8 +2102,7 @@ Draws an image on the canvas.
 | dw    | number                                   | No   | 0    | Width of the drawing area.                     |
 | dh    | number                                   | No   | 0    | Height of the drawing area.                     |
 
-
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2134,7 +2131,7 @@ Draws an image on the canvas.
   }
   ```
 
-  ![en-us_image_0000001256978377](figures/en-us_image_0000001256978377.png)
+  ![en-us_image_0000001238712447](figures/en-us_image_0000001238712447.png)
 
 
 ### createImageData
@@ -2143,9 +2140,9 @@ createImageData(sw: number, sh: number): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value  | Description           |
+| Name | Type    | Mandatory  | Default Value  | Description           |
 | ---- | ------ | ---- | ---- | ------------- |
 | sw   | number | Yes   | 0    | Width of the **ImageData** object.|
 | sh   | number | Yes   | 0    | Height of the **ImageData** object.|
@@ -2155,9 +2152,9 @@ createImageData(imageData: ImageData): ImageData
 
 Creates an **[ImageData](ts-components-canvas-imagedata.md)** object by copying an existing **ImageData** object.
 
- **Parameters**
+**Parameters**
 
-| Name       | Type                                      | Mandatory  | Default Value  | Description              |
+| Name   | Type                                      | Mandatory  | Default Value  | Description              |
 | --------- | ---------------------------------------- | ---- | ---- | ---------------- |
 | imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes   | null | **ImageData** object to copy.|
 
@@ -2173,9 +2170,9 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created with the pixels within the specified area on the canvas.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description             |
+| 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.|
@@ -2195,9 +2192,9 @@ 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.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description             |
+| 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.|
@@ -2210,7 +2207,6 @@ Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created wi
 | ---------------------------------------- | ------------- |
 | [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
 
-
 **Example**
 
   ```ts
@@ -2254,9 +2250,9 @@ 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.
 
- **Parameters**
+**Parameters**
 
-| Name         | Type    | Mandatory  | Default Value         | Description                           |
+| Name     | Type    | Mandatory  | Default Value         | Description                           |
 | ----------- | ------ | ---- | ------------ | ----------------------------- |
 | imagedata   | Object | Yes   | null         | **ImageData** object with pixels to put onto the canvas.           |
 | dx          | number | Yes   | 0            | X-axis offset of the rectangular area on the canvas.               |
@@ -2266,7 +2262,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
 | dirtyWidth  | number | No   | Width of the **ImageData** object| Width of the rectangular area to crop the source image.              |
 | dirtyHeight | number | No   | Height of the **ImageData** object| Height of the rectangular area to crop the source image.              |
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2301,7 +2297,7 @@ Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectang
   }
   ```
 
-  ![en-us_image_0000001212058496](figures/en-us_image_0000001212058496.png)
+  ![en-us_image_0000001194192464](figures/en-us_image_0000001194192464.png)
 
 ### setLineDash
 
@@ -2311,7 +2307,7 @@ Sets the dash line style.
 
 **Parameters**
 
-| Name      | Type      | Description                 |
+| Name  | Type      | Description                 |
 | -------- | -------- | ------------------- |
 | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
 
@@ -2457,9 +2453,9 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
 
 Sets the quality of image smoothing. This API is a void API.
 
- **Parameters**
+**Parameters**
 
-| Name     | Type                   | Description                                      |
+| Name | Type                   | Description                                      |
 | ------- | --------------------- | ---------------------------------------- |
 | quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.|
 
@@ -2476,8 +2472,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
 | ---------------------------------------- | --------------- |
 | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Pixel data rendered on the **OffscreenCanvas**.|
 
-
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2520,7 +2515,7 @@ restore(): void
 
 Restores the saved drawing context.
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2561,7 +2556,7 @@ save(): void
 
 Saves the current drawing context.
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2602,16 +2597,16 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 Creates a linear gradient.
 
- **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description      |
+| Name | Type    | Mandatory  | Default Value | Description      |
 | ---- | ------ | ---- | ---- | -------- |
 | x0   | number | Yes   | 0    | X-coordinate of the start point.|
 | y0   | number | Yes   | 0    | Y-coordinate of the start point.|
 | x1   | number | Yes   | 0    | X-coordinate of the end point.|
 | y1   | number | Yes   | 0    | Y-coordinate of the end point.|
 
- **Example**
+**Example**
 
   ```ts
   // xxx.ets
@@ -2645,7 +2640,7 @@ Creates a linear gradient.
   }
   ```
 
-  ![en-us_image_0000001212378434](figures/en-us_image_0000001212378434.png)
+  ![en-us_image_0000001194352460](figures/en-us_image_0000001194352460.png)
 
 
 ### createRadialGradient
@@ -2654,9 +2649,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 Creates a linear gradient.
 
-  **Parameters**
+**Parameters**
 
-| Name  | Type    | Mandatory  | Default Value | Description               |
+| Name | Type    | Mandatory  | Default Value | Description               |
 | ---- | ------ | ---- | ---- | ----------------- |
 | x0   | number | Yes   | 0    | X-coordinate of the center of the start circle.        |
 | y0   | number | Yes   | 0    | Y-coordinate of the center of the start circle.        |
@@ -2665,7 +2660,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
@@ -2699,7 +2694,7 @@ Creates a linear gradient.
   }
   ```
 
-  ![en-us_image_0000001212218480](figures/en-us_image_0000001212218480.png)
+  ![en-us_image_0000001238952407](figures/en-us_image_0000001238952407.png)
 
 
 ## CanvasPattern

en/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md

@@ -4,19 +4,14 @@
 
 >  **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.
-
-
-## Required Permissions
-
-None
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Attributes
 
-| Name  | Type  | Default Value | Description                |
-| ---- | ------ | ---- | ------------------ |
-| id   | string | ''   | Unique ID you assigned to the component.|
+| Name  | Type    | Description                        |
+| -----| -------- | ----------------------------- |
+| id   | string   | Unique ID you assigned to the component.<br>Default value: **''**|
 
 
 ## APIs
@@ -26,101 +21,109 @@ None
 
 getInspectorByKey(id: string): string
 
-Obtains all attributes of the component with the specified ID, excluding the information about child components. This is a system API. 
+Obtains all attributes of the component with the specified ID, excluding the information about child components.
+This is a system API. 
+
+**Parameters**
 
-- Parameters
-  | Name  | Type    | Mandatory  | Default Value | Description         |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | id   | string | Yes   | -    | ID of the component whose attributes are to be obtained.|
+| Name  | Type     | Mandatory    | Description       |
+| ---- | -------- | ---- | -------------|
+| id   | string   | Yes   | ID of the component whose attributes are to be obtained.|
 
-- Return value
-  | Type    | Description             |
-  | ------ | --------------- |
-  | string | JSON string of the component attribute list.|
+**Return value**
+
+| Type       | Description            |
+| -------| -------------- |
+| string | JSON string of the component attribute list.|
 
 ### getInspectorTree
 
 getInspectorTree(): string
 
-Obtains the component tree and component attributes. This is a system API. 
+Obtains the component tree and component attributes.
+This is a system API. 
 
-- Return value
+**Return value**
 
-  | Type    | Description                 |
-  | ------ | ------------------- |
-  | string | JSON string of the component tree and component attribute list.|
+| Type    | Description                           |
+| ------ | --------------------------- |
+| string | JSON string of the component tree and component attribute list.|
 
 ### sendEventByKey
 
 sendEventByKey(id: string, action: number, params: string): boolean
 
-Sends an event to the component with the specified ID. This is a system API. 
+Sends an event to the component with the specified ID.
+This is a system API. 
+
+**Parameters**
+
+| Name      | Type     | Mandatory      | Description                        |
+| ------ | -------| ---- | -------------------------- |
+| id     | string | Yes   | ID of the component to which the event is to be sent.                     |
+| action | number | Yes   | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long-click event.|
+| params | string | Yes   | Event parameters. If there is no parameter, pass an empty string **""**.           |
 
-- Parameters
-  | Name    | Type    | Mandatory  | Default Value | Description                                      |
-  | ------ | ------ | ---- | ---- | ---------------------------------------- |
-  | id     | string | Yes   | -    | ID of the component to which the event is to be sent.                            |
-  | action | number | Yes   | -    | Type of the event to be sent. The options are as follows:<br>- **10**: click event.<br>- **11**: long click event.|
-  | params | string | Yes   | -    | Event parameters. If there is no parameter, pass an empty string **""**.                  |
+**Return value**
 
-- Return value
-  | Type     | Description                            |
-  | ------- | ------------------------------ |
-  | boolean | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
+| Type         | Description                        |
+| -------- | --------------------------|
+| boolean  | Returns **true** if the component with the specified ID is found; returns **false** otherwise.|
 
 ### sendTouchEvent
 
 sendTouchEvent(event: TouchObject): boolean
 
-Sends a touch event. This is a system API. 
+Sends a touch event.
+This is a system API. 
 
-- Parameters
+**Parameters**
 
-  | Name   | Type         | Mandatory  | Default Value | Description                                      |
-  | ----- | ----------- | ---- | ---- | ---------------------------------------- |
-  | event | TouchObject | Yes   | -    | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
+| Name     | Type           | Mandatory | Description                                                        |
+| ----- | ----------- | ---- | ------------------------------------------------------------ |
+| event | [TouchObject](ts-universal-events-touch.md#touchobject) | Yes   | Location where a touch event is triggered. For details, see [TouchEvent](ts-universal-events-touch.md#touchevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                        |
-  | ------- | -------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                        |
+| ------- | ---------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendKeyEvent
 
 sendKeyEvent(event: KeyEvent): boolean
 
-Sends a key event. This is a system API. 
+Sends a key event.
 
-- Parameters
+**Parameters**
 
-  | Name   | Type      | Mandatory  | Default Value | Description                                      |
-  | ----- | -------- | ---- | ---- | ---------------------------------------- |
-  | event | KeyEvent | Yes   | -    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
+| Name   | Type    | Mandatory     | Description                                                        |
+| ----- | -------- | ----  | ------------------------------------------------------------ |
+| event | [KeyEvent](ts-universal-events-key.md#keyevent) | Yes    | Key event. For details, see [KeyEvent](ts-universal-events-key.md#keyevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                         |
-  | ------- | --------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                          |
+| ------- | ------------------------------|
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ### sendMouseEvent
 
 sendMouseEvent(event: MouseEvent): boolean
 
-Sends a mouse event. This is a system API. 
+Sends a mouse event.
 
-- Parameters
+**Parameters**
 
-  | Name   | Type        | Mandatory  | Default Value | Description                                      |
-  | ----- | ---------- | ---- | ---- | ---------------------------------------- |
-  | event | MouseEvent | Yes   | -    | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
+| Name    | Type      | Mandatory      | Description                                    |
+| ----- | ---------- | ----  | --------------------------------------- |
+| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent) | Yes   | Mouse event. For details, see [MouseEvent](ts-universal-mouse-key.md#mouseevent).|
 
-- Return value
+**Return value**
 
-  | Type     | Description                         |
-  | ------- | --------------------------- |
-  | boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
+| Type     | Description                                |
+| ------- | ---------------------------------- |
+| boolean | Returns **true** if the event is sent successfully; returns **false** otherwise.|
 
 ## Example
 
@@ -133,6 +136,7 @@ class Utils {
   static rect_bottom;
   static rect_value;
 
+  // Obtain the coordinates of the rectangular area occupied by the component.
   static getComponentRect(key) {
     let strJson = getInspectorByKey(key);
     let obj = JSON.parse(strJson);
@@ -172,32 +176,32 @@ struct IdExample {
         console.info(getInspectorTree())
         this.text = "Button 'click to start' is clicked"
         setTimeout(() => {
-          sendEventByKey("longclick", 11, "")
+          sendEventByKey("longClick", 11, "") // Send a long-click event to the component whose ID is "longClick".
         }, 2000)
       }).id('click')
 
       Button() {
-        Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
+        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
       }.margin({ top: 20 }).backgroundColor('#0D9FFB')
       .gesture(
       LongPressGesture().onActionEnd(() => {
         console.info('long clicked')
-        this.text = "Button 'longclick' is longclicked"
+        this.text = "Button 'longClick' is longclicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onTouch')
+          let rect = Utils.getComponentRect('onTouch') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onTouch".
           let touchPoint: TouchObject = {
             id: 1,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
             type: TouchType.Down,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.left + (rect.right - rect.left) / 2,
+            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            screenY: rect.left + (rect.right - rect.left) / 2, // Y coordinate of the component center.
           }
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // Send a touch event.
           touchPoint.type = TouchType.Up
-          sendTouchEvent(touchPoint)
+          sendTouchEvent(touchPoint) // Send a touch event.
         }, 2000)
-      })).id('longclick')
+      })).id('longClick')
 
       Button() {
         Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
@@ -206,14 +210,14 @@ struct IdExample {
         console.info('onTouch is clicked')
         this.text = "Button 'onTouch' is clicked"
         setTimeout(() => {
-          let rect = Utils.getComponentRect('onMouse')
+          let rect = Utils.getComponentRect('onMouse') // Obtain the coordinates of the rectangular area occupied by the component whose ID is "onMouse".
           let mouseEvent: MouseEvent = {
             button: MouseButton.Left,
             action: MouseAction.Press,
-            x: rect.left + (rect.right - rect.left) / 2,
-            y: rect.top + (rect.bottom - rect.top) / 2,
-            screenX: rect.left + (rect.right - rect.left) / 2,
-            screenY: rect.top + (rect.bottom - rect.top) / 2,
+            x: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            y: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
+            screenX: rect.left + (rect.right - rect.left) / 2, // X coordinate of the component center.
+            screenY: rect.top + (rect.bottom - rect.top) / 2, // Y coordinate of the component center.
             timestamp: 1,
             target: {
               area: {
@@ -231,7 +235,7 @@ struct IdExample {
             },
             source: SourceType.Mouse
           }
-          sendMouseEvent(mouseEvent)
+          sendMouseEvent(mouseEvent) // Send a mouse event.
         }, 2000)
       }).id('onTouch')
 
@@ -251,7 +255,7 @@ struct IdExample {
             metaKey: 0,
             timestamp: 0
           }
-          sendKeyEvent(keyEvent)
+          sendKeyEvent(keyEvent) // Send a key event.
         }, 2000)
       }).id('onMouse')
 

en/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md

@@ -10,10 +10,10 @@
 
 | Name        | Type                                    | Description                                      |
 | ---------- | ---------------------------------------- | ---------------------------------------- |
-| flexBasis  | string \| number             | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
+| flexBasis  | string \| number                         | Base size of a component in the main axis of the parent container.<br>Default value: **'auto'** (indicating that the base size of the component in the main axis is the original size of the component)|
 | flexGrow   | number                                   | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**      |
-| flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>Default value: **1**    |
-| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | he default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto** |
+| flexShrink | number                                   | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.      |
+| alignSelf  | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis, which overwrites the default **alignItems** configuration in the parent container.<br>Default value: **ItemAlign.Auto**|
 
 
 ## Example
@@ -23,7 +23,6 @@
 @Entry
 @Component
 struct FlexExample {
-
   build() {
     Column({ space: 5 }) {
       Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
@@ -109,4 +108,4 @@ struct FlexExample {
 }
 ```
 
-![en-us_image_0000001212378394](figures/en-us_image_0000001212378394.png)
+![en-us_image_0000001219744197](figures/en-us_image_0000001219744197.png)

en/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md

@@ -12,7 +12,7 @@ You can set the opacity of a component.
 
 | Name     | Type                                    | Description                                      |
 | ------- | ---------------------------------------- | ---------------------------------------- |
-| opacity | number \| [Resource](ts-types.md#resource) | Opacity of a component. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.<br/>**NOTE**<br/>A child component can inherit this attribute of its parent component.<br>Default value: **1** |
+| opacity | number \| [Resource](ts-types.md#resource) | Opacity of the component. The value ranges from 0 to 1. The value **1** means opaque, and **0** means completely transparent. When being completely transparent, the component is hidden, but still takes up space in the layout.<br>**NOTE**<br>A child component can inherit this attribute of its parent component. Default value: **1**|
 
 
 ## Example
@@ -30,6 +30,10 @@ struct OpacityExample {
       Text().width('90%').height(50).opacity(0.7).backgroundColor(0xAFEEEE)
       Text('opacity(0.4)').fontSize(9).width('90%').fontColor(0xCCCCCC)
       Text().width('90%').height(50).opacity(0.4).backgroundColor(0xAFEEEE)
+      Text('opacity(0.1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0.1).backgroundColor(0xAFEEEE)
+      Text('opacity(0)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(0).backgroundColor(0xAFEEEE)
     }
     .width('100%')
     .padding({ top: 5 })
@@ -37,4 +41,4 @@ struct OpacityExample {
 }
 ```
 
-![en-us_image_0000001256858385](figures/en-us_image_0000001256858385.gif)
+![opacity.png](figures/opacity.png)

en/application-dev/ui/ui-js-building-ui-layout-text.md

 # Adding Title and Paragraph Text
 
-
-The <text> component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a <text> component and add the text to be displayed between the <text> and </text> tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
-
+The **\<text>** component is most commonly used to display text in title and paragraph areas. You can set attributes and styles for a **\<text>** component and add the text to be displayed between the **\<text>** and **\</text>** tags. For details about the attributes and styles, see [text](../reference/arkui-js/js-components-basic-text.md). The following is an example of adding title and paragraph text on a page:
 
 
 ```
@@ -15,15 +13,16 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
 ```
 
 
-
 ```
 /* xxx.css */
 .container {
   flex-direction: column;
   margin-top: 20px;
   margin-left: 30px;
+  font-weight: 700;
 }
 .title-text {
+  width: 95%;
   color: #1a1a1a;
   font-size: 50px;
   margin-top: 40px;
@@ -37,14 +36,15 @@ The &lt;text&gt; component is most commonly used to display text in title and pa
 ```
 
 
-
 ```
 // xxx.js
 export default {
   data: {
-    headTitle: 'Capture the Beauty in This Moment',
+    headTitle: 'Capture the Beauty in Moment',
     paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
     paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
   },
 }
 ```
+
+ ![en-us_image_0000001118642600](figures/en-us_image_0000001118642600.PNG) 

en/application-dev/ui/ui-js-components-grid.md

-# <grid-container> Development
+# Grid Layout
 
 
-The **<grid-container>** component is the root container of the grid layout. Within the root container, you can use **<grid-row>** and **<grid-col>** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md).
+The **\<grid-container>** component is the root container of the grid layout. Within the root container, you can use **\<grid-row>** and **\<grid-col>** for the grid layout. For details, see [Grid-container](../reference/arkui-js/js-components-grid-container.md).
 
 
-## Creating a &lt;grid-container&gt; Component
+## Creating a \<grid-container> Component
 
-Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component.
+Create a **\<grid-container>** component in the .hml file under **pages/index** and add a [\<Grid-row>](../reference/arkui-js/js-components-grid-row.md) child component.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
@@ -22,7 +22,7 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -35,16 +35,17 @@ Create a **&lt;grid-container&gt;** component in the .hml file under **pages/ind
 
 ![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
-> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
+> **NOTE**
+>
+> **\<grid-container>** supports only **\<grid-row>** as a child component.
 
 
 ## Methods
 
-Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
+Touch the **\<grid-container>** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
@@ -61,7 +62,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -73,7 +74,7 @@ Click the **&lt;grid-container&gt;** component to call the **getColumns**, **get
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
@@ -108,12 +109,12 @@ export default {
 ![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
 
 
-## Adding &lt;grid-col&gt;
+## Adding \<grid-col>
 
-After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
+After adding a **\<grid-row>** child component to **\<grid-container>**, add a **\<grid-col>** child component to **\<grid-row>** to form a layout.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
@@ -148,7 +149,7 @@ After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;*
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -165,8 +166,9 @@ text{
 
 ![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
-> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
+> **NOTE**
+>
+> **\<grid-row>** supports only **\<grid-col>** as a child component. You can add content only to **\<grid-col>**.
 
 
 ## Example Scenario
@@ -174,7 +176,7 @@ text{
 In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <refresh refreshing="{{fresh}}" onrefresh="refresh">
@@ -197,7 +199,7 @@ In this example, the content in the list is output cyclically to create a grid l
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -211,7 +213,7 @@ text{
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
@@ -241,10 +243,4 @@ export default {
 ```
 
 
-![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
-
+![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
\ No newline at end of file
-## Samples
-
-The following sample is provided to help you better understand how to develop the **\<grid>** component:
-
-[`JsGrid`: grid (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
\ No newline at end of file

en/application-dev/ui/ui-js-components-offscreencanvas.md

-# OffscreenCanvas
+# OffscreenCanvasRenderingContext2D
 
+**OffscreenCanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on an offscreen canvas, which is a new buffer created by the GPU outside of the current buffer. For details, see [OffscreenCanvasRenderingContext2D](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md).
 
-Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
+In the following example, you first create an offscreen canvas, and then create a **getContext2d** object on the canvas, which is an image, and finally set the **filter** attribute for the image.
 
-
-
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -24,11 +23,11 @@ Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the
 </div>
 ```
 
-
-
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -48,9 +47,7 @@ select{
 }
 ```
 
-
-
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -75,12 +72,10 @@ export default {
     this.img.onerror = function() {
       prompt.showToast({message:"error",duration:2000})
     };
-    var bitmap = this.offscreen.transferToImageBitmap();
-    this.ctx.transferFromImageBitmap(bitmap);
+    var bitmap = this.offscreen.transferToImageBitmap();    this.ctx.transferFromImageBitmap(bitmap);
   },
   change(e){
-    this.offCanvas.filter = e.newValue;
-    this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
+    this.offCanvas.filter = e.newValue;this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
     var bitmap = this.offscreen.transferToImageBitmap();
     this.ctx.transferFromImageBitmap(bitmap);
   },
@@ -93,10 +88,10 @@ export default {
 
 ## Determining the Position
 
-Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
+Use **isPointInPath** to determine whether a coordinate is within the path area and use **isPointInStroke** to determine whether a coordinate is on the edge of the path.
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content">
@@ -110,9 +105,11 @@ Use **isPointInPath** and **isPointInStroke** to determine and show whether a co
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -143,7 +140,7 @@ button{
 ```
 
 
-```
+```js
 // xxx.js
 export default {
   data: {
@@ -188,4 +185,4 @@ export default {
 }
 ```
 
-![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif)
+![en-us_image_0000001178084014](figures/en-us_image_0000001178084014.gif)