Update docs (18865)

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

en/application-dev/quick-start/start-with-ets-stage.md

@@ -37,14 +37,14 @@
 
 - **AppScope** > **app.json5**: global configuration of your application.
 - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
-- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
   - **src > main > ets**: a collection of ArkTS source code.
   - **src > main > ets > entryability**: entry to your application/service.
   - **src > main > ets > pages**: pages included in your application/service.
   - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
   - **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details, see [module.json5 Configuration File](module-configuration-file.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. Under **targets**, you can set **runtimeOS** to **HarmonyOS** (default) or **OpenHarmony**, depending on the OS of your application.
-- **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
+  - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
+- **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212).
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
 - **hvigorfile.ts**: application-level build script.
 

en/application-dev/reference/arkui-ts/Readme-EN.md

@@ -33,19 +33,21 @@
     - [Gradient Color](ts-universal-attributes-gradient-color.md)
     - [Popup Control](ts-universal-attributes-popup.md)
     - [Menu Control](ts-universal-attributes-menu.md)
-    - [Click Control](ts-universal-attributes-click.md)
     - [Focus Control](ts-universal-attributes-focus.md)
     - [Hover Effect](ts-universal-attributes-hover-effect.md)
     - [Component ID](ts-universal-attributes-component-id.md)
-    - [Touch Target](ts-universal-attributes-touch-target.md)
     - [Polymorphic Style](ts-universal-attributes-polymorphic-style.md)
-    - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
-    - [Background Blur](ts-universal-attributes-backgroundBlurStyle.md)
     - [restoreId](ts-universal-attributes-restoreId.md)
     - [Foreground Color](ts-universal-attributes-foreground-color.md)
-    - [Spherical Effect](ts-universal-attributes-sphericalEffect.md)
-    - [Light Up Effect](ts-universal-attributes-lightUpEffect.md)
-    - [Pixel Stretch Effect](ts-universal-attributes-pixelStretchEffect.md)
+    - [Click Effect](ts-universal-attributes-click-effect.md)
+    - Touch Interactions
+      - [Click Control](ts-universal-attributes-click.md)
+      - [Touch Target](ts-universal-attributes-touch-target.md)
+      - [Hit Test Control](ts-universal-attributes-hit-test-behavior.md)
+    - Touch Interactions
+      - [Modal Transition](ts-universal-attributes-modal-transition.md)
+      - [Sheet Transition](ts-universal-attributes-sheet-transition.md)
+    - [Obscuring](ts-universal-attributes-obscured.md)
   - [Universal Text Attributes](ts-universal-attributes-text-style.md)
   - Gesture Handling
     - [Gesture Binding Methods](ts-gesture-settings.md)
@@ -146,12 +148,13 @@
 - Canvas Components
   - [Canvas](ts-components-canvas-canvas.md)
   - [CanvasGradient](ts-components-canvas-canvasgradient.md)
+  - [CanvasPattern](ts-components-canvas-canvaspattern.md)
   - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
   - [ImageBitmap](ts-components-canvas-imagebitmap.md)
   - [ImageData](ts-components-canvas-imagedata.md)
+  - [Matrix2D](ts-components-canvas-matrix2d.md)
   - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
   - [Path2D](ts-components-canvas-path2d.md)
-  - [Lottie](ts-components-canvas-lottie.md)
 - Animation
   - [AnimatorProperty](ts-animatorproperty.md)
   - [Explicit Animatio](ts-explicit-animation.md)

en/application-dev/reference/arkui-ts/ts-appendix-enums.md

 # Enums
 
+>**NOTE**
+>
+>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+
 ## Color
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Color                | Value  | Illustration                                                    |
-| ------------------------ | -------- | ------------------------------------------------------------ |
-| Black                    | 0x000000 | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
-| Blue                     | 0x0000ff | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
-| Brown                    | 0xa52a2a | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
-| Gray                     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
-| Grey                     | 0x808080 | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
-| Green                    | 0x008000 | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
-| Orange                   | 0xffa500 | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
-| Pink                     | 0xffc0cb | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
-| Red                      | 0xff0000 | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
-| White                    | 0xffffff | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
-| Yellow                   | 0xffff00 | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
-| Transparent<sup>9+</sup> | rgba(0,0,0,0)  |  Transparent                                                                  |
+| Color                    | Value          | Illustration                                    |
+| ------------------------ | ------------- | ---------------------------------------- |
+| Black                    | 0x000000      | ![en-us_image_0000001219864153](figures/en-us_image_0000001219864153.png) |
+| Blue                     | 0x0000ff      | ![en-us_image_0000001174104404](figures/en-us_image_0000001174104404.png) |
+| Brown                    | 0xa52a2a      | ![en-us_image_0000001219744201](figures/en-us_image_0000001219744201.png) |
+| Gray                     | 0x808080      | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
+| Grey                     | 0x808080      | ![en-us_image_0000001174264376](figures/en-us_image_0000001174264376.png) |
+| Green                    | 0x008000      | ![en-us_image_0000001174422914](figures/en-us_image_0000001174422914.png) |
+| Orange                   | 0xffa500      | ![en-us_image_0000001219662661](figures/en-us_image_0000001219662661.png) |
+| Pink                     | 0xffc0cb      | ![en-us_image_0000001219662663](figures/en-us_image_0000001219662663.png) |
+| Red                      | 0xff0000      | ![en-us_image_0000001219662665](figures/en-us_image_0000001219662665.png) |
+| White                    | 0xffffff      | ![en-us_image_0000001174582866](figures/en-us_image_0000001174582866.png) |
+| Yellow                   | 0xffff00      | ![en-us_image_0000001174582864](figures/en-us_image_0000001174582864.png) |
+| Transparent<sup>9+</sup> | rgba(0,0,0,0) | Transparent                                     |
 
 ## ImageFit
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name     | Description                                                        |
-| --------- | ------------------------------------------------------------ |
+| Name       | Description                             |
+| --------- | ------------------------------- |
 | Contain   | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.  |
 | Cover     | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
-| Auto      | The image is scaled automatically to fit the display area.                                               |
-| Fill      | The image is scaled to fill the display area, and its aspect ratio is not retained.            |
-| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size.                      |
-| None      | The original size is retained.                                          |
+| Auto      | The image is scaled automatically to fit the display area.                          |
+| Fill      | The image is scaled to fill the display area, and its aspect ratio is not retained.       |
+| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size.            |
+| None      | The original size is retained.                      |
 
 ## BorderStyle
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                                           |
-| ------ | ----------------------------------------------- |
+| Name    | Description                           |
+| ------ | ----------------------------- |
 | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
-| Dashed | Dashed border.                     |
-| Solid  | Solid border.                               |
+| Dashed | Dashed border.                |
+| Solid  | Solid border.                     |
 
 ## LineJoinStyle
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name | Description                |
-| ----- | -------------------- |
+| Name   | Description        |
+| ----- | ---------- |
 | Bevel | Bevel is used to connect paths.|
 | Miter | Miter is used to connect paths.|
 | Round | Round is used to connect paths.|
 
 ## TouchType
 
-| Name  | Description                          |
-| ------ | ------------------------------ |
-| Down   | A finger is pressed.              |
-| Up     | A finger is lifted.              |
+| Name    | Description             |
+| ------ | --------------- |
+| Down   | A finger is pressed.       |
+| Up     | A finger is lifted.       |
 | Move   | A finger moves on the screen in pressed state.|
-| Cancel | A touch event is canceled.          |
+| Cancel | A touch event is canceled.     |
 
 ## MouseButton
 
-| Name   | Description            |
-| ------- | ---------------- |
-| Left    | Left button on the mouse.      |
-| Right   | Right button on the mouse.      |
-| Middle  | Middle button on the mouse.      |
+| Name     | Description      |
+| ------- | -------- |
+| Left    | Left button on the mouse.   |
+| Right   | Right button on the mouse.   |
+| Middle  | Middle button on the mouse.   |
 | Back    | Back button on the left of the mouse.|
 | Forward | Forward button on the left of the mouse.|
-| None    | No button.        |
+| None    | No button.    |
 
 ## MouseAction
 
-| Name   | Description          |
-| ------- | -------------- |
+| Name     | Description     |
+| ------- | ------- |
 | Press   | The mouse button is pressed.|
 | Release | The mouse button is released.|
-| Move    | The mouse cursor moves.    |
-| Hover    | The mouse pointer is hovered on an element.    |
+| Move    | The mouse cursor moves.  |
+| Hover   | The mouse pointer is hovered on an element.  |
 
 ## Curve
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name               | Description                                                        |
-| ------------------- | ------------------------------------------------------------ |
-| Linear              | The animation speed keeps unchanged.                          |
+| Name                 | Description                                      |
+| ------------------- | ---------------------------------------- |
+| Linear              | The animation speed keeps unchanged.                       |
 | Ease                | The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.|
-| EaseIn              | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.      |
-| EaseOut             | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.      |
+| EaseIn              | The animation starts at a low speed and then picks up speed until the end. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.|
+| EaseOut             | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.|
 | EaseInOut           | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.|
-| FastOutSlowIn       | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).                |
-| LinearOutSlowIn     | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).                |
-| FastOutLinearIn     | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).                |
-| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).                |
-| Sharp               | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).              |
-| Rhythm              | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).                |
-| Smooth              | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).                |
-| Friction            | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).                 |
+| FastOutSlowIn       | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0).  |
+| LinearOutSlowIn     | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0).  |
+| FastOutLinearIn     | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0).  |
+| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).  |
+| Sharp               | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).|
+| Rhythm              | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).  |
+| Smooth              | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).  |
+| Friction            | The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).   |
 
 ## AnimationStatus
 
 Since API version 10, this API is supported in ArkTS widgets.
 
-| Name   | Description              |
-| ------- | ------------------ |
-| Initial | The animation is in the initial state.    |
+| Name     | Description       |
+| ------- | --------- |
+| Initial | The animation is in the initial state.  |
 | Running | The animation is being played.|
 | Paused  | The animation is paused.|
 | Stopped | The animation is stopped.|
@@ -116,10 +120,10 @@ Since API version 10, this API is supported in ArkTS widgets.
 
 Since API version 10, this API is supported in ArkTS widgets.
 
-| Name     | Description                                                        |
-| --------- | ------------------------------------------------------------ |
-| None      | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.|
-| Forwards  | The target component retains the state set by the last keyframe encountered during execution of the animation.                |
+| Name       | Description                                      |
+| --------- | ---------------------------------------- |
+| None      | Before execution, the animation does not apply any styles to the target component. After execution, the animation restores the target component to its default state.    |
+| Forwards  | The target component retains the state set by the last keyframe encountered during execution of the animation.                  |
 | Backwards | The animation applies the values defined in the first relevant keyframe once it is applied to the target component, and retains the values during the period set by **delay**. The first relevant keyframe depends on the value of **playMode**. If **playMode** is **Normal** or **Alternate**, the first relevant keyframe is in the **from** state. If **playMode** is **Reverse** or **AlternateReverse**, the first relevant keyframe is in the **to** state.|
 | Both      | The animation follows the rules for both **Forwards** and **Backwards**, extending the animation attributes in both directions.|
 
@@ -127,140 +131,140 @@ Since API version 10, this API is supported in ArkTS widgets.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name            | Description                                                        |
-| ---------------- | ------------------------------------------------------------ |
-| Normal           | The animation is played forwards.                                            |
-| Reverse          | The animation is played backwards.                                              |
+| Name              | Description                                      |
+| ---------------- | ---------------------------------------- |
+| Normal           | The animation is played forwards.                                |
+| Reverse          | The animation is played backwards.                                 |
 | Alternate        | The animation is played forwards for an odd number of times (1, 3, 5...) and backwards for an even number of times (2, 4, 6...).|
 | AlternateReverse | The animation is played backwards for an odd number of times (1, 3, 5...) and forwards for an even number of times (2, 4, 6...).|
 
 ## KeyType
 
-| Name| Description      |
-| ---- | ---------- |
+| Name  | Description   |
+| ---- | ----- |
 | Down | The key is pressed.|
 | Up   | The key is released.|
 
 ## KeySource
 
-| Name    | Description                |
-| -------- | -------------------- |
-| Unknown  | Unknown input device.  |
+| Name      | Description        |
+| -------- | ---------- |
+| Unknown  | Unknown input device. |
 | Keyboard | The input device is a keyboard.|
 
 ## Edge
 
-| Name    | Description                  |
-| -------- | ---------------------- |
-| Top      | Top edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| Center<sup>(deprecated) </sup>   | Center position in the vertical direction.<br> This API is deprecated since API version 9.|
-| Bottom   | Bottom edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.|
-| Start    | Start position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| Middle<sup>(deprecated) </sup>   | Center position in the horizontal direction.<br> This API is deprecated since API version 9.|
-| End      | End position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name                              | Description                                      |
+| -------------------------------- | ---------------------------------------- |
+| Top                              | Top edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Center<sup>(deprecated) </sup>   | Center position in the vertical direction.<br> This API is deprecated since API version 9.        |
+| Bottom                           | Bottom edge in the vertical direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Baseline<sup>(deprecated) </sup> | Text baseline position in the cross axis direction.<br> This API is deprecated since API version 9.     |
+| Start                            | Start position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Middle<sup>(deprecated) </sup>   | Center position in the horizontal direction.<br> This API is deprecated since API version 9.        |
+| End                              | End position in the horizontal direction.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 ## Week
 
-| Name    | Description                  |
-| -------- | ---------------------- |
-| Mon      | Monday.               |
-| Tue      | Tuesday.               |
-| Wed      | Wednesday.               |
-| Thur     | Thursday.               |
-| Fri      | Friday.               |
-| Sat      | Saturday.               |
-| Sun      | Sunday.               |
+| Name  | Description  |
+| ---- | ---- |
+| Mon  | Monday. |
+| Tue  | Tuesday. |
+| Wed  | Wednesday. |
+| Thur | Thursday. |
+| Fri  | Friday. |
+| Sat  | Saturday. |
+| Sun  | Sunday. |
 
 ## Direction
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name| Description                  |
-| ---- | ---------------------- |
-| Ltr  | Components are arranged from left to right.    |
-| Rtl  | Components are arranged from right to left.    |
+| Name  | Description         |
+| ---- | ----------- |
+| Ltr  | Components are arranged from left to right.  |
+| Rtl  | Components are arranged from right to left.  |
 | Auto | The default layout direction is used.|
 
 ## BarState
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name| Description                            |
-| ---- | -------------------------------- |
-| Off  | Not displayed.                        |
-| On   | Always displayed.                      |
+| Name  | Description                |
+| ---- | ------------------ |
+| Off  | Not displayed.              |
+| On   | Always displayed.             |
 | Auto | Displayed when the screen is touched and hidden after 2s.|
 
 ## EdgeEffect
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                                                        |
-| ------ | ------------------------------------------------------------ |
+| Name    | Description                                      |
+| ------ | ---------------------------------------- |
 | Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produces a bounce effect when the user releases their finger.|
 | Fade   | Fade effect. When at one of the edges, the component produces a fade effect.                    |
-| None   | No effect when the component is at one of the edges.                                        |
+| None   | No effect when the component is at one of the edges.                              |
 
 ## Alignment
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name       | Description            |
-| ----------- | ---------------- |
-| TopStart    | Top start.    |
-| Top         | Horizontally centered on the top.  |
-| TopEnd      | Top end.      |
+| Name         | Description      |
+| ----------- | -------- |
+| TopStart    | Top start.  |
+| Top         | Horizontally centered on the top. |
+| TopEnd      | Top end.   |
 | Start       | Vertically centered start.|
 | Center      | Horizontally and vertically centered.|
-| End         | Vertically centered end.  |
-| BottomStart | Bottom start.    |
-| Bottom      | Horizontally centered on the bottom.  |
-| BottomEnd   | Bottom end.      |
+| End         | Vertically centered end. |
+| BottomStart | Bottom start.  |
+| Bottom      | Horizontally centered on the bottom. |
+| BottomEnd   | Bottom end.   |
 
 ## TransitionType
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                                              |
-| ------ | -------------------------------------------------- |
+| Name    | Description                            |
+| ------ | ------------------------------ |
 | All    | The transition takes effect in all scenarios.|
 | Insert | The transition takes effect when a component is inserted or displayed.|
 | Delete | The transition takes effect when a component is deleted or hidden.|
 
 ## RelateType
 
-| Name  | Description                             |
-| ------ | ------------------------------- |
-| FILL    | The current child component is scaled to fill the parent component.     |
-| FIT     | The current child component is scaled to adapt to the parent component.   |
+| Name  | Description            |
+| ---- | -------------- |
+| FILL | The current child component is scaled to fill the parent component.|
+| FIT  | The current child component is scaled to adapt to the parent component.|
 
 ## Visibility
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name   | Description                            |
-| ------- | -------------------------------- |
-| Hidden  | The component is hidden, and a placeholder is used for it in the layout.      |
-| Visible | The component is visible.                          |
+| Name     | Description              |
+| ------- | ---------------- |
+| Hidden  | The component is hidden, and a placeholder is used for it in the layout.   |
+| Visible | The component is visible.             |
 | None    | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
 
 ## LineCapStyle
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                |
-| ------ | -------------------- |
-| Butt   | The ends of the line are squared off, and the line does not extend beyond its two endpoints.|
-| Round  | The line is extended at the endpoints by a half circle whose diameter is equal to the line width.|
+| Name    | Description                           |
+| ------ | ----------------------------- |
+| Butt   | The ends of the line are squared off, and the line does not extend beyond its two endpoints.              |
+| Round  | The line is extended at the endpoints by a half circle whose diameter is equal to the line width.           |
 | Square | The line is extended at the endpoints by a rectangle whose width is equal to half the line width and height equal to the line width.|
 
 ## Axis
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name      | Description        |
-| ---------- | ------------ |
+| Name        | Description    |
+| ---------- | ------ |
 | Vertical   | Vertical direction.|
 | Horizontal | Horizontal direction.|
 
@@ -268,21 +272,21 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                    |
-| ------ | ------------------------ |
+| Name    | Description          |
+| ------ | ------------ |
 | Start  | Aligned with the start edge in the same direction as the language in use.|
 | Center | Aligned with the center. This is the default alignment mode.|
-| End    | Aligned with the end edge in the same direction as the language in use.  |
+| End    | Aligned with the end edge in the same direction as the language in use. |
 
 ## FlexAlign
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name        | Description                                                        |
-| ------------ | ------------------------------------------------------------ |
-| Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
-| Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
-| End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
+| Name          | Description                                      |
+| ------------ | ---------------------------------------- |
+| Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.   |
+| Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.  |
+| End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.     |
 | SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same.|
 | SpaceAround  | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components.|
 | SpaceEvenly  | The child components are evenly distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between any two adjacent components are the same.|
@@ -291,96 +295,96 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name    | Description                                                        |
-| -------- | ------------------------------------------------------------ |
-| Auto     | The default configuration of the flex container is used.                                    |
-| Start    | The items in the flex container are aligned with the cross-start edge.                      |
-| Center   | The items in the flex container are centered along the cross axis.                      |
-| End      | The items in the flex container are aligned with the cross-end edge.                      |
+| Name      | Description                                      |
+| -------- | ---------------------------------------- |
+| Auto     | The default configuration of the flex container is used.                          |
+| Start    | The items in the flex container are aligned with the cross-start edge.                   |
+| Center   | The items in the flex container are centered along the cross axis.                   |
+| End      | The items in the flex container are aligned with the cross-end edge.                   |
 | Stretch  | The items in the flex container are stretched and padded along the cross axis. If the flex container has the **Wrap** attribute set to **FlexWrap.Wrap** or **FlexWrap.WrapReverse**, the items are stretched to the cross size of the widest element on the current row or column. In other cases, the items with no size set are stretched to the container size.|
-| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis.                  |
+| Baseline | The items in the flex container are aligned in such a manner that their text baselines are aligned along the cross axis.                 |
 
 ## FlexDirection
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name         | Description                          |
-| ------------- | ------------------------------ |
-| Row           | The child components are arranged in the same direction as the main axis runs along the rows.|
-| RowReverse    | The child components are arranged opposite to the **Row** direction.   |
-| Column        | The child components are arranged in the same direction as the main axis runs down the columns.|
-| ColumnReverse | The child components are arranged opposite to the **Column** direction.    |
+| Name           | Description              |
+| ------------- | ---------------- |
+| Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
+| RowReverse    | The child components are arranged opposite to the **Row** direction. |
+| Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
+| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
 
 ## FlexWrap
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name       | Description                                             |
-| ----------- | ------------------------------------------------- |
-| NoWrap      | The child components in the flex container are arranged in a single line, and they cannot overflow.  |
-| Wrap        | The child components in the flex container are arranged in multiple lines, and they may overflow.    |
+| Name         | Description                         |
+| ----------- | --------------------------- |
+| NoWrap      | The child components in the flex container are arranged in a single line, and they cannot overflow. |
+| Wrap        | The child components in the flex container are arranged in multiple lines, and they may overflow.  |
 | WrapReverse | The child components in the flex container are reversely arranged in multiple lines, and they may overflow.|
 
 ## VerticalAlign
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description                    |
-| ------ | ------------------------ |
-| Top    | Top aligned.              |
+| Name    | Description          |
+| ------ | ------------ |
+| Top    | Top aligned.       |
 | Center | Center aligned. This is the default alignment mode.|
-| Bottom | Bottom aligned.              |
+| Bottom | Bottom aligned.       |
 
 ## ImageRepeat
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name    | Description                      |
-| -------- | -------------------------- |
+| Name      | Description           |
+| -------- | ------------- |
 | X        | The image is repeatedly drawn only along the horizontal axis.|
 | Y        | The image is repeatedly drawn only along the vertical axis.|
-| XY       | The image is repeatedly drawn along both axes.  |
-| NoRepeat | The image is not repeatedly drawn.          |
+| XY       | The image is repeatedly drawn along both axes. |
+| NoRepeat | The image is not repeatedly drawn.     |
 
 ## ImageSize
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Type   | Description                                                        |
-| ------- | ------------------------------------------------------------ |
+| Type     | Description                                 |
+| ------- | ----------------------------------- |
 | Cover   | Default value. The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
-| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.  |
-| Auto    | The original image aspect ratio is retained.                                        |
+| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries.      |
+| Auto    | The original image aspect ratio is retained.                         |
 
 ## GradientDirection
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name       | Description      |
-| ----------- | ---------- |
+| Name         | Description   |
+| ----------- | ----- |
 | Left        | The gradient direction is from right to left.|
 | Top         | The gradient direction is from bottom to top.|
 | Right       | The gradient direction is from left to right.|
 | Bottom      | The gradient direction is from top to bottom.|
-| LeftTop     | The gradient direction is upper left.    |
-| LeftBottom  | The gradient direction is lower left.    |
-| RightTop    | The gradient direction is upper right.    |
-| RightBottom | The gradient direction is lower right.    |
-| None        | No gradient.      |
+| LeftTop     | The gradient direction is upper left.  |
+| LeftBottom  | The gradient direction is lower left.  |
+| RightTop    | The gradient direction is upper right.  |
+| RightBottom | The gradient direction is lower right.  |
+| None        | No gradient.   |
 
 ## SharedTransitionEffectType
 
-| Name       | Description      |
-| ----------- | ---------- |
-| Static        | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
-| Exchange      | The element is relocated and scaled properly on the target page.|
+| Name      | Description                                      |
+| -------- | ---------------------------------------- |
+| Static   | The element position remains unchanged on the target page, and transition opacity can be configured. Currently, this effect is only valid in redirecting to the target page.|
+| Exchange | The element is relocated and scaled properly on the target page.                 |
 
 ## FontStyle
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name  | Description            |
-| ------ | ---------------- |
+| Name    | Description      |
+| ------ | -------- |
 | Normal | Standard font style.|
 | Italic | Italic font style.|
 
@@ -388,151 +392,168 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name   | Description          |
-| ------- | -------------- |
-| Lighter | The font weight is lighter.    |
+| Name     | Description     |
+| ------- | ------- |
+| Lighter | The font weight is lighter.  |
 | Normal  | The font weight is normal.|
 | Regular | The font weight is regular.|
 | Medium  | The font weight is medium.|
-| Bold    | The font weight is bold.    |
-| Bolder  | The font weight is bolder.  |
+| Bold    | The font weight is bold.  |
+| Bolder  | The font weight is bolder. |
 
 ## TextAlign
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name                 | Description          |
-| --------------------- | -------------- |
+| Name                   | Description     |
+| --------------------- | ------- |
 | Start                 | Aligned with the start.|
 | Center                | Horizontally centered.|
 | End                   | Aligned with the end.|
-| Justify<sup>10+</sup> | Aligned with both margins.    |
+| JUSTIFY<sup>10+</sup> | Aligned with both margins.  |
 
 ## TextOverflow
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name                 | Description                                  |
-| --------------------- | -------------------------------------- |
-| None                  | Extra-long text is clipped.              |
-| Clip                  | Extra-long text is clipped.              |
+| Name                   | Description                 |
+| --------------------- | ------------------- |
+| None                  | Extra-long text is clipped.         |
+| Clip                  | Extra-long text is clipped.       |
 | Ellipsis              | An ellipsis (...) is used to represent text overflow.|
-| Marquee<sup>10+</sup> | Text continuously scrolls when text overflow occurs.        |
+| MARQUEE<sup>10+</sup> | Text continuously scrolls when text overflow occurs.    |
 
 ## TextDecorationType
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name       | Description              |
-| ----------- | ------------------ |
-| Underline   | Line under the text.  |
+| Name         | Description       |
+| ----------- | --------- |
+| Underline   | Line under the text. |
 | LineThrough | Line through the text.|
-| Overline    | Line over the text.  |
+| Overline    | Line over the text. |
 | None        | No decorative lines.|
 
 ## TextCase
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name     | Description                |
-| --------- | -------------------- |
+| Name       | Description        |
+| --------- | ---------- |
 | Normal    | The original case of the text is retained.|
-| LowerCase | All letters in the text are in lowercase.    |
-| UpperCase | All letters in the text are in uppercase.    |
+| LowerCase | All letters in the text are in lowercase.  |
+| UpperCase | All letters in the text are in uppercase.  |
 
 ## ResponseType<sup>8+</sup>
 
-| Name      | Description                      |
-| ---------- | -------------------------- |
-| LongPress  | The menu is displayed when the component is long-pressed.    |
+| Name        | Description           |
+| ---------- | ------------- |
+| LongPress  | The menu is displayed when the component is long-pressed.  |
 | RightClick | The menu is displayed when the component is right-clicked.|
 
 ## HoverEffect<sup>8+</sup>
 
-| Name     | Description                        |
-| --------- | ---------------------------- |
+| Name       | Description            |
+| --------- | -------------- |
 | Auto      | Default hover effect.|
-| Scale     | Scale effect.              |
-| Highlight | Background fade-in and fade-out effect.    |
-| None      | No effect.                |
+| Scale     | Scale effect.       |
+| Highlight | Background fade-in and fade-out effect.  |
+| None      | No effect.        |
 
 ## Placement<sup>8+</sup>
 
-| Name         | Description                                                        |
-| ------------- | ------------------------------------------------------------ |
-| Left          | The popup is on the left of the component, vertically aligned with the component on the left.                  |
-| Right         | The popup is on the right of the component, vertically aligned with the component on the right.                  |
-| Top           | The popup is at the top of the component, horizontally aligned with the component at the top.                  |
-| Bottom        | The popup is at the bottom of the component, horizontally aligned with the component at the bottom.                  |
+| Name           | Description                                    |
+| ------------- | -------------------------------------- |
+| Left          | The popup is on the left of the component, vertically aligned with the component on the left.                 |
+| Right         | The popup is on the right of the component, vertically aligned with the component on the right.                 |
+| Top           | The popup is at the top of the component, horizontally aligned with the component at the top.                 |
+| Bottom        | The popup is at the bottom of the component, horizontally aligned with the component at the bottom.                 |
 | TopLeft       | The popup is at the top of the component and, since API version 9, aligned with the left of the component.|
 | TopRight      | The popup is at the top of the component and, since API version 9, aligned with the right of the component.|
 | BottomLeft    | The popup is at the bottom of the component and, since API version 9, aligned with the left of the component.|
 | BottomRight   | The popup is at the bottom of the component and, since API version 9, aligned with the right of the component.|
-| LeftTop9+     | The popup is on the left of the component and aligned with the top of the component.                  |
-| LeftBottom9+  | The popup is on the left of the component and aligned with the bottom of the component.                  |
-| RightTop9+    | The popup is on the right of the component and aligned with the top of the component.                  |
-| RightBottom9+ | The popup is on the right of the component and aligned with the bottom of the component.                  |
+| LeftTop9+     | The popup is on the left of the component and aligned with the top of the component.                 |
+| LeftBottom9+  | The popup is on the left of the component and aligned with the bottom of the component.                 |
+| RightTop9+    | The popup is on the right of the component and aligned with the top of the component.                 |
+| RightBottom9+ | The popup is on the right of the component and aligned with the bottom of the component.                 |
 
 ## CopyOptions<sup>9+</sup>
 
 Since API version 9, this API is supported in ArkTS widgets.
 
-| Name       | Description                |
-| ----------- | -------------------- |
-| None        | Copy is not allowed.    |
+| Name         | Description      |
+| ----------- | -------- |
+| None        | Copy is not allowed.  |
 | InApp       | Intra-application copy is allowed.|
 | LocalDevice | Intra-device copy is allowed.|
 
 ## HitTestMode<sup>9+</sup>
 
-| Name       | Description                |
-| ----------- | -------------------- |
-| Default     | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test.  |
-| Block       | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test.       |
+| Name         | Description                                      |
+| ----------- | ---------------------------------------- |
+| Default     | Both the node and its child node respond to the hit test of a touch event, but its sibling node is blocked from the hit test.|
+| Block       | The node responds to the hit test of a touch event, but its child node and sibling node are blocked from the hit test.|
 | Transparent | Both the node and its child node respond to the hit test of a touch event, and its sibling node is also considered during the hit test.|
-| None        | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.|
+| None        | The node does not respond to the hit test of a touch event, but its child node and sibling node are considered during the hit test.     |
 
 ## BlurStyle<sup>9+</sup>
 
 This API is supported in ArkTS widgets.
 
-| Name| Description|
-| ------- | ---------- |
-| Thin   | Thin material.    |
-| Regular | Regular material. |
-| Thick   | Thick material.      |
-| BackgroundThin | Material that creates the minimum depth of field effect.|
-| BackgroundRegular | Material that creates a medium shallow depth of field effect.|
-| BackgroundThick | Material that creates a high shallow depth of field effect.|
-| BackgroundUltraThick | Material that creates the maximum depth of field effect.|
+| Name                  | Description       |
+| -------------------- | --------- |
+| Thin                 | Thin material.  |
+| Regular              | Regular material.|
+| Thick                | Thick material.   |
+| BACKGROUND_THIN       | Material that creates the minimum depth of field effect.  |
+| BACKGROUND_REGULAR    | Material that creates a medium shallow depth of field effect.  |
+| BACKGROUND_THICK      | Material that creates a high shallow depth of field effect.  |
+| BACKGROUND_ULTRA_THICK | Material that creates the maximum depth of field effect. |
 
 ## ThemeColorMode<sup>10+</sup>
 
-| Name  | Description     |
-| ------- | ---------- |
-| System | Following the system color mode.|
-| Light | Light color mode.|
-| Dark | Dark color mode.|
+| Name    | Description        |
+| ------ | ---------- |
+| SYSTEM | Following the system color mode.|
+| LIGHT  | Light color mode. |
+| DARK   | Dark color mode. |
 
 ## AdaptiveColor<sup>10+</sup>
 
-| Name  | Description     |
-| ------- | ----------- |
-| Default | Adaptive color mode is not used. The default color is used as the mask color.|
-| Average | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.|
+| Name     | Description                       |
+| ------- | ------------------------- |
+| DEFAULT | Adaptive color mode is not used. The default color is used as the mask color.   |
+| AVERAGE | Adaptive color mode is used. The average color value of the color picking area is used as the mask color.|
 
 ## TextHeightAdaptivePolicy<sup>10+</sup>
 
-| Name                   | Description                                            |
-| ----------------------- | ------------------------------------------------ |
-| MAX_LINES_FIRST         | Prioritize the **maxLines** settings.        |
-| MIN_FONT_SIZE_FIRST     | Prioritize the **minFontSize** settings.        |
+| Name                     | Description                      |
+| ----------------------- | ------------------------ |
+| MAX_LINES_FIRST         | Prioritize the **maxLines** settings.|
+| MIN_FONT_SIZE_FIRST     | Prioritize the **minFontSize** settings.    |
 | LAYOUT_CONSTRAINT_FIRST | Prioritize the layout constraint settings in terms of height.|
 
+## ObscuredReasons<sup>10+</sup>
+
+This API is supported in ArkTS widgets.
+
+| Name       | Description                    |
+| ----------- | ------------------------ |
+| PLACEHOLDER | The content is replaced by a placeholder.|
+
 ## TransitionEdge<sup>10+<sup>
-| Name| Description|
-| -------- | -------- |
-| TOP | Top edge of the window.|
+
+| Name    | Description    |
+| ------ | ------ |
+| TOP    | Top edge of the window.|
 | BOTTOM | Bottom edge of the window.|
-| START | Left edge of the window.|
-| END | Right edge of the window.|
+| START  | Left edge of the window.|
+| END    | Right edge of the window.|
+
+## ClickEffectLevel<sup>10+<sup>
+
+| Name  | Description              | Animation Settings                         | Default Zoom Ratio                    |
+| ------ | --------------------------------- | --------------------------------- | --------------------------------- |
+| LIGHT  | Small area (light)| Spring effect, with stiffness of 410, damping of 38, and initial velocity of 1.| 90% |
+| MIDDLE | Medium area (stable)| Spring effect, with stiffness of 350, damping of 35, and initial velocity of 0.5.| 95% |
+| HEAVY  | Large area (heavy)| Spring effect, with stiffness of 240, damping of 28, and initial velocity of 0.| 95% |

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

@@ -23,9 +23,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.|
+| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.<br>**NOTE**<br>If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.|
 | min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
-| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
+| max | number | No| Maximum value of the current data segment.<br>Default value: **100**<br>**NOTE**<br>If the value of **max** is less than that of **min**, the default values **0** and **100** are used.<br>The values of **max** and **min** can be negative numbers.|
 
 ## Attributes
 
@@ -36,8 +36,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeWidth | Length | Stroke width of the chart.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | Length | Stroke width of the chart.<br>Default value: **4**<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot be in percentage.|
 
 ## ColorStop
 
@@ -47,7 +47,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name     | Type            | Description                                                        |
 | --------- | -------------------- | ------------------------------------------------------------ |
-| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.|
+| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0.|
 
 
 ## Example

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

@@ -10,15 +10,15 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
 
 ## APIs
 
-CanvasRenderingContext2D(setting: RenderingContextSetting)
+CanvasRenderingContext2D(settings?: RenderingContextSettings)
 
 Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name    | Type                                    | Mandatory  | Description                                    |
-| ------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| setting | [RenderingContextSettings](#renderingcontextsettings) | Yes   | See [RenderingContextSettings](#renderingcontextsettings).|
+| Name     | Type                                    | Mandatory  | Description                                    |
+| -------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| settings | [RenderingContextSettings](#renderingcontextsettings) | No   | See [RenderingContextSettings](#renderingcontextsettings).|
 
 
 ### RenderingContextSettings
@@ -38,25 +38,30 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 ## Attributes
 
-| Name                                                 | Type                                                        | Description                                                        |
-| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| [fillStyle](#fillstyle)                               | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is number, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineWidth](#linewidth)                               | number                                                       | Line width.                                        |
-| [strokeStyle](#strokestyle)                           | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is number, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name                                      | Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| [fillStyle](#fillstyle)                  | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is string, this attribute indicates the color of the fill area.<br>- When the type is number, this attribute indicates the color of the fill area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineWidth](#linewidth)                  | number                                   | Line width.                              |
+| [strokeStyle](#strokestyle)              | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.<br>- When the type is string, this attribute indicates the stroke color.<br>- When the type is number, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineCap](#linecap)                      | CanvasLineCap                            | Style of the line endpoints. The options are as follows:<br>- **'butt'**: The endpoints of the line are squared off.<br>- **'round'**: The endpoints of the line are rounded.<br>- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.<br>Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineJoin](#linejoin)                    | CanvasLineJoin                           | Style of the shape used to join line segments. The options are as follows:<br>- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.<br>- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.<br>- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [miterLimit](#miterlimit)                | number                                   | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [font](#font)                            | string                                   | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.<br>- (Optional) **font-size**: font size and row height. The unit must be specified and can only be px or vp.<br>- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textAlign](#textalign)                  | CanvasTextAlign                          | Text alignment mode. Available values are as follows:<br>- **'left'**: The text is left-aligned.<br>- **'right'**: The text is right-aligned.<br>- **'center'**: The text is center-aligned.<br>- **'start'**: The text is aligned with the start bound.<br>- **'end'**: The text is aligned with the end bound.<br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textBaseline](#textbaseline)            | CanvasTextBaseline                       | Horizontal alignment mode of text. Available values are as follows:<br>- **'alphabetic'**: The text baseline is the normal alphabetic baseline.<br>- **'top'**: The text baseline is on the top of the text bounding box.<br>- **'hanging'**: The text baseline is a hanging baseline over the text.<br>- **'middle'**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalAlpha](#globalalpha)              | number                                   | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineDashOffset](#linedashoffset)        | number                                   | Offset of the dashed line. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalCompositeOperation](#globalcompositeoperation) | string                                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowBlur](#shadowblur)                | number                                   | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowColor](#shadowcolor)              | string                                   | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetX](#shadowoffsetx)          | number                                   | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetY](#shadowoffsety)          | number                                   | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [height](#height)                        | number                                   | Component height.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [width](#width)                          | number                                   | Component width.<br>Unit: vp<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality                    | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**. Available values are as follows:<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.<br>Default value: **'low'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [direction](#direction)                  | CanvasDirection                          | Text direction used for drawing text. Available values are as follows:<br>- **'inherit'**: The text direction is inherited from the **\<Canvas>** component.<br>- **'ltr'**: The text direction is from left to right.<br>- **'rtl'**: The text direction is from right to left.<br>Default value: **'inherit'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [filter](#filter)                        | string                                   | Filter effect. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 > **NOTE**
 >
@@ -652,6 +657,68 @@ struct ImageSmoothingEnabled {
 ![en-us_image_0000001211898472](figures/en-us_image_0000001211898472.png)
 
 
+### height
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct HeightExample {
+  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(300)
+        .height(300)
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          let h = this.context.height
+          let w = this.context.width
+          this.context.fillRect(0, 0, 300, h/2)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_canvas_height](figures/en-us_image_canvas_height.png)
+
+
+### width
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct WidthExample {
+  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(300)
+        .height(300)
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          let h = this.context.height
+          let w = this.context.width
+          this.context.fillRect(0, 0, w/2, 300)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_canvas_width](figures/en-us_image_canvas_width.png)
+
+
 ## Methods
 
 
@@ -805,12 +872,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
+| maxWidth | number | No   | -    | Maximum width allowed for the text.   |
 
 **Example**
 
@@ -852,12 +919,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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**
 
@@ -899,14 +966,14 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 **TextMetrics**
@@ -1197,16 +1264,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name      | Type                                              | Mandatory| Description                                                        |
-| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
-| image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | Yes  | Source image. For details, see **ImageBitmap**.                         |
-| repetition | string                                             | Yes  | Repetition mode. The value can be **'repeat'**, **'repeat-x'**, **'repeat-y'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.<br>Default value: **''**|
+| 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'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.<br>Default value: **''**|
 
 **Return value**
 
-| Type                             | Description                     |
-| ------------------------------- | ----------------------- |
-| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
+| Type                                      | Description                     |
+| ---------------------------------------- | ----------------------- |
+| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
 
 **Example**
 
@@ -1449,16 +1516,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name              | Type     | Mandatory  | Default Value  | Description               |
-| ---------------- | ------- | ---- | ----- | ----------------- |
-| x                | number  | Yes   | 0     | X-coordinate of the ellipse center.       |
-| y                | number  | Yes   | 0     | Y-coordinate of the ellipse center.       |
-| radiusX          | number  | Yes   | 0     | Ellipse radius on the x-axis.       |
-| radiusY          | number  | Yes   | 0     | Ellipse radius on the y-axis.       |
-| rotation         | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.   |
-| startAngle       | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.|
-| endAngle         | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.|
-| counterclockwise | boolean | No   | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise.    |
+| Name              | Type     | Mandatory  | Default Value  | Description                                      |
+| ---------------- | ------- | ---- | ----- | ---------------------------------------- |
+| x                | number  | Yes   | 0     | X-coordinate of the ellipse center.                              |
+| y                | number  | Yes   | 0     | Y-coordinate of the ellipse center.                              |
+| radiusX          | number  | Yes   | 0     | Ellipse radius on the x-axis.                              |
+| radiusY          | number  | Yes   | 0     | Ellipse radius on the y-axis.                              |
+| rotation         | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.                          |
+| startAngle       | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.                       |
+| endAngle         | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.                       |
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse in the counterclockwise direction.<br>**true**: Draw the arc counterclockwise.<br>**false**: Draw the arc clockwise.|
 
 **Example**
 
@@ -1739,15 +1806,76 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 filter(filter: string): void
 
-Provides filter effects. This API is a void API.
+Provides filter effects.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name    | Type    | Mandatory  | Default Value | Description          |
-| ------ | ------ | ---- | ---- | ------------ |
-| filter | string | Yes   | -    | Filter functions.|
+| Name    | Type    | Mandatory  | Default Value | Description                                      |
+| ------ | ------ | ---- | ---- | ---------------------------------------- |
+| filter | string | Yes   | -    | Filter functions. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**|
+
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct FilterDemo {
+    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 }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            let img = this.img
+
+            ctx.drawImage(img, 0, 0, 100, 100);
+
+            ctx.filter = 'grayscale(50%)';
+            ctx.drawImage(img, 100, 0, 100, 100);
+
+            ctx.filter = 'sepia(60%)';
+            ctx.drawImage(img, 200, 0, 100, 100);
+
+            ctx.filter = 'saturate(30%)';
+            ctx.drawImage(img, 0, 100, 100, 100);
+
+            ctx.filter = 'hue-rotate(90degree)';
+            ctx.drawImage(img, 100, 100, 100, 100);
+
+            ctx.filter = 'invert(100%)';
+            ctx.drawImage(img, 200, 100, 100, 100);
+
+            ctx.filter = 'opacity(25%)';
+            ctx.drawImage(img, 0, 200, 100, 100);
+
+            ctx.filter = 'brightness(0.4)';
+            ctx.drawImage(img, 100, 200, 100, 100);
+
+            ctx.filter = 'contrast(200%)';
+            ctx.drawImage(img, 200, 200, 100, 100);
+
+            ctx.filter = 'blur(5px)';
+            ctx.drawImage(img, 0, 300, 100, 100);
+
+            let result = ctx.toDataURL()
+            console.info(result)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![filterDemo](figures/filterDemo.jpeg)
 
 
 ### getTransform
@@ -1758,6 +1886,12 @@ Obtains the current transformation matrix being applied to the context. This API
 
 Since API version 9, this API is supported in ArkTS widgets.
 
+**Return value**
+
+| Type                                      | Description   |
+| ---------------------------------------- | ----- |
+| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.|
+
 
 ### resetTransform
 
@@ -1772,10 +1906,42 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 direction(direction: CanvasDirection): void
 
-Sets the current text direction used to draw text. This API is a void API.
+Sets the current text direction used to draw text.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct DirectionDemo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            ctx.font = '48px serif';
+            ctx.textAlign = 'start'
+            ctx.fillText("Hi ltr!", 200, 50);
+
+            ctx.direction = "rtl";
+            ctx.fillText("Hi rtl!", 200, 100);
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![directionDemo](figures/directionDemo.jpeg)
 
 ### rotate
 
@@ -1982,6 +2148,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
   ![en-us_image_0000001256858395](figures/en-us_image_0000001256858395.png)
 
+### setTransform
 
 setTransform(transform?: Matrix2D): void
 
@@ -1989,6 +2156,11 @@ Resets the current transformation to the identity matrix, and then creates a new
 
 Since API version 9, this API is supported in ArkTS widgets.
 
+**Parameters**
+
+| Name       | Type                                      | Mandatory  | Default Value | Description   |
+| --------- | ---------------------------------------- | ---- | ---- | ----- |
+| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No   | null | Transformation matrix.|
 
 ### translate
 
@@ -2207,9 +2379,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 ### putImageData
 
-putImageData(imageData: ImageData, dx: number, dy: number): void
+putImageData(imageData: ImageData, dx: number | string, dy: number | string): void
 
-putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
+putImageData(imageData: ImageData, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth: number | string, dirtyHeight: number | string): void
 
 Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
 
@@ -2220,12 +2392,12 @@ Since API version 9, this API is supported in ArkTS widgets.
 | Name         | Type                                      | Mandatory  | Default Value         | Description                           |
 | ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
 | imagedata   | [ImageData](ts-components-canvas-imagedata.md) | 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.               |
-| dy          | number                                   | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
-| dirtyX      | number                                   | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
-| dirtyY      | number                                   | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
-| 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.              |
+| dx          | number \| string<sup>10+</sup> | Yes   | 0            | X-axis offset of the rectangular area on the canvas.               |
+| dy          | number \| string<sup>10+</sup> | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
+| dirtyX      | number \| string<sup>10+</sup> | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyY      | number \| string<sup>10+</sup> | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyWidth  | number \| string<sup>10+</sup> | No   | Width of the **ImageData** object| Width of the rectangular area to crop the source image.              |
+| dirtyHeight | number \| string<sup>10+</sup> | No   | Height of the **ImageData** object| Height of the rectangular area to crop the source image.              |
 
 **Example**
 
@@ -2370,7 +2542,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 imageSmoothingQuality(quality: imageSmoothingQuality)
 
-Sets the quality of image smoothing. This API is a void API.
+Sets the quality of image smoothing.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
@@ -2378,9 +2550,38 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 | Name     | Type                   | Description                                      |
 | ------- | --------------------- | ---------------------------------------- |
-| quality | imageSmoothingQuality | The options are as follows: '**low'**, **'medium'**, and **'high'**.|
+| quality | imageSmoothingQuality | Quality of image smoothing.<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.|
 
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct ImageSmoothingQualityDemo {
+    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 }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let ctx = this.context
+            ctx.imageSmoothingEnabled = true
+            ctx.imageSmoothingQuality = 'high'
+            ctx.drawImage(this.img, 0, 0, 400, 200)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
 
+![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg)
 
 ### transferFromImageBitmap
 
@@ -2673,11 +2874,11 @@ Creates a conic gradient.
 
 **Parameters**
 
-| Name      | Type  | Mandatory| Default Value| Description                                                        |
-| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
-| startAngle | number | Yes  | 0      | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
-| x          | number | Yes  | 0      | X-coordinate of the center of the conic gradient, in vp.                             |
-| y          | number | Yes  | 0      | Y-coordinate of the center of the conic gradient, in vp.                             |
+| Name        | Type    | Mandatory  | Default Value | Description                                 |
+| ---------- | ------ | ---- | ---- | ----------------------------------- |
+| startAngle | number | Yes   | 0    | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
+| x          | number | Yes   | 0    | X-coordinate of the center of the conic gradient, in vp.                  |
+| y          | number | Yes   | 0    | X-coordinate of the center of the conic gradient, in vp.                  |
 
 **Example**
 
@@ -2711,9 +2912,3 @@ struct CanvasExample {
 ```
 
   ![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png)
-
-## CanvasPattern
-
-Defines an object created using the **[createPattern](#createpattern)** API.
-
-Since API version 9, this API is supported in ArkTS widgets.

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

+# CanvasPattern
+
+**CanvasPattern** represents an object, created by the [createPattern](ts-canvasrenderingcontext2d.md#createpattern) API, describing an image filling pattern based on the image and repetition mode.
+
+>  **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.
+
+## Methods
+
+### setTransform
+
+setTransform(transform?: Matrix2D): void
+
+Uses a **Matrix2D** object as a parameter to perform matrix transformation on the current **CanvasPattern** object.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Name     | Type                                                 | Mandatory| Default Value| Description      |
+| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
+| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No  | null   | Transformation matrix.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct CanvasPatternPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private matrix: Matrix2D = new Matrix2D()
+  private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
+  private pattern : CanvasPattern
+
+  build() {
+      Column() {
+        Button("Click to set transform")
+          .onClick(() => {
+            this.matrix.scaleY = 1
+            this.matrix.scaleX = 1
+            this.matrix.translateX = 50
+            this.matrix.translateY = 200
+            this.pattern.setTransform(this.matrix)
+            this.context.fillRect(0, 0, 480, 720)
+          })
+          .width("45%")
+          .margin("5px")
+        Canvas(this.context)
+          .width('100%')
+          .height('80%')
+          .backgroundColor('#FFFFFF')
+          .onReady(() => {
+            this.pattern = this.context.createPattern(this.img, 'no-repeat')
+            this.context.fillStyle = this.pattern
+            this.matrix.scaleY = 0.5
+            this.matrix.scaleX = 0.5
+            this.matrix.translateX = 50
+            this.matrix.translateY = 50
+            this.pattern.setTransform(this.matrix)
+            this.context.fillRect(0, 0, 480, 720)
+          })
+      }
+      .width('100%')
+      .height('100%')
+  }
+}
+```
+
+![CanvasPattern](./figures/canvas_pattern.gif)

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

@@ -65,6 +65,6 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 close()
 
-Releases all graphics resources associated with this **ImageBitmap** object. This API is a void API.
+Releases all graphics resources associated with this **ImageBitmap** object and sets its width and height to **0**.
 
 Since API version 9, this API is supported in ArkTS widgets.

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

-# Lottie
-
-**Lottie** allows you to implement animation-specific operations.
-
-> **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.
-
-
-
-## Modules to Import
-
-```
-import lottie from '@ohos/lottieETS'
-```
-
-> **NOTE**
->
-> To use **Lottie**, download it first by running the **ohpm install @ohos/lottieETS** command in the Terminal window.
-
-
-## lottie.loadAnimation
-
-loadAnimation(
-
-path: string, container: object, render: string, loop: boolean, autoplay: boolean, name: string ): AnimationItem
-
-Loads an animation. Before calling this API, declare the **Animator('__lottie_ets')** object and make sure the canvas layout is complete. This API can be used together with the lifecycle callback **onReady()** of the **Canvas** component.
-
-**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. 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.<br>Default value: **true**|
-| 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: **""**       |
-| initialSegment | [number, number]       | No   | Start frame and end frame of the animation, respectively.                |
-
-
-## lottie.destroy
-
-destroy(name: string): void
-
-Destroys the animation. This API must be called when a page exits. This API can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description                                      |
-| ---- | ------ | ---- | ---------------------------------------- |
-| name | string | Yes   | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** API. By default, all animations are destroyed.|
-
-**Example** 
-  ```ts
-  // xxx.ets
-  import lottie from '@ohos/lottieETS'
-
-  @Entry
-  @Component
-  struct Index {
-    private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
-    private animateName: string = "animate"
-    private animatePath: string = "common/lottie/data.json"
-    private animateItem: any = null
-
-    onPageHide(): void {
-      console.log('onPageHide')
-      lottie.destroy()
-    }
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.controller)
-        .width('30%')
-        .height('20%')
-        .backgroundColor('#0D9FFB')
-        .onReady(() => {
-          console.log('canvas onAppear');
-          this.animateItem = lottie.loadAnimation({
-            container: this.controller,
-            renderer: 'canvas',
-            loop: true,
-            autoplay: true,
-            name: this.animateName,
-            path: this.animatePath,
-          })
-        })
-
-        Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
-        Button('load animation')
-          .onClick(() => {
-          if (this.animateItem != null) {
-            this.animateItem.destroy()
-            this.animateItem = null
-          }
-          this.animateItem = lottie.loadAnimation({
-            container: this.controller,
-            renderer: 'canvas',
-            loop: true,
-            autoplay: true,
-            name: this.animateName,
-            path: this.animatePath,
-            initialSegment: [10, 50],
-          })
-        })
-
-        Button('destroy animation')
-          .onClick(() => {
-            lottie.destroy(this.animateName)
-            this.animateItem = null
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }
-  }
-  ```
-
-  ![en-us_image_0000001194352468](figures/en-us_image_0000001194352468.gif)
-
-
-## lottie.play
-
-play(name: string): void
-
-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** API. By default, all animations are played.|
-
-**Example**
-
-  ```ts
-  lottie.play(this.animateName)
-  ```
-
-
-## lottie.pause
-
-pause(name: string): void
-
-Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description                                      |
-| ---- | ------ | ---- | ---------------------------------------- |
-| name | string | Yes   | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused.|
-
-**Example**
-
-  ```ts
-  lottie.pause(this.animateName)
-  ```
-
-
-## lottie.togglePause
-
-togglePause(name: string): void
-
-Pauses or plays a specified animation. This API is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description                                      |
-| ---- | ------ | ---- | ---------------------------------------- |
-| name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are paused or played.|
-
-**Example**
-
-  ```ts
-  lottie.togglePause(this.animateName)
-  ```
-
-
-## lottie.stop
-
-stop(name: string): void
-
-Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description                                      |
-| ---- | ------ | ---- | ---------------------------------------- |
-| name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** API. By default, all animations are stopped.|
-
-**Example**
-
-  ```ts
-  lottie.stop(this.animateName)
-  ```
-
-
-## lottie.setSpeed
-
-setSpeed(speed: number, name: string): void
-
-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** API. By default, all animations are set.|
-
-**Example**
-
-  ```ts
-  lottie.setSpeed(5, this.animateName)
-  ```
-
-
-## lottie.setDirection
-
-setDirection(direction: AnimationDirection, name: string): void
-
-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** API. By default, all animations are set.|
-
-**Example**
-
-  ```ts
-  lottie.setDirection(-1, this.animateName)
-  ```
-
-
-## AnimationItem
-
-Defines an **AnimationItem** object, which is returned by the **loadAnimation** API and has attributes and APIs. The attributes are described as follows:
-
-| Name             | Type                                    | Description                                    |
-| ----------------- | ---------------------------------------- | ---------------------------------------- |
-| name              | string                                   | Animation name.                                   |
-| isLoaded          | boolean                                  | Whether the animation is loaded.                                |
-| currentFrame      | number                                   | Frame that is being played. The default precision is a floating-point number greater than or equal to 0.0. After **setSubframe(false)** is called, the value is a positive integer without decimal points.|
-| currentRawFrame   | number                                   | Number of frames that are being played. The precision is a floating point number greater than or equal to 0.0.           |
-| firstFrame        | number                                   | First frame of the animation segment that is being played.                           |
-| totalFrames       | number                                   | Total number of frames in the animation segment that is being played.                             |
-| frameRate         | number                                   | Frame rate (frame/s).                      |
-| frameMult         | number                                   | Frame rate (frame/ms).                     |
-| playSpeed         | number                                   | 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.|
-| playDirection     | number                                   | Playback direction.<br>**1**: forward.<br/>**-1**: backward.            |
-| playCount         | number                                   | Number of times the animation plays.                              |
-| isPaused          | boolean                                  | Whether the current animation is paused. The value **true** means that the animation is paused.            |
-| autoplay          | boolean                                  | Whether to automatically play the animation upon completion of the loading. The value **false** means that the **play()** API needs to be called to start playing.|
-| loop              | boolean \| number              | If the value is of the Boolean type, this parameter indicates whether to repeat the animation cyclically after the animation ends. 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. |
-| renderer          | any                                      | Animation rendering object, which depends on the rendering type.                  |
-| animationID       | string                                   | Animation ID.                                   |
-| timeCompleted     | number                                   | Number of frames that are played for an animation sequence. The value is affected by the setting of **AnimationSegment** and is the same as the value of **totalFrames**.|
-| segmentPos        | number                                   | ID of the current animation segment. The value is a positive integer greater than or equal to 0.            |
-| isSubframeEnabled | boolean                                  | Whether the precision of **currentFrame** is a floating point number.               |
-| segments          | AnimationSegment \| AnimationSegment[] | Current segment of the animation.                              |
-
-
-## AnimationItem.play
-
-play(name?: string): void
-
-Plays an animation.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description             |
-| ---- | ------ | ---- | --------------- |
-| name | string | No   | Name of the target animation.<br>Default value: **""** |
-
-**Example**
-
-  ```ts
-  this.animateItem.play()
-  ```
-
-
-## AnimationItem.destroy
-
-destroy(name?: string): void
-
-Destroys an animation.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description             |
-| ---- | ------ | ---- | --------------- |
-| name | string | No   | Name of the target animation. By default, the value is null.|
-
-**Example**
-
-  ```ts
-  this.animateItem.destroy()
-  ```
-
-
-## AnimationItem.pause
-
-pause(name?: string): void
-
-Pauses an animation. When the **play** API is called next time, the animation is played from the current frame.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description             |
-| ---- | ------ | ---- | --------------- |
-| name | string | No   | Name of the target animation. By default, the value is null.|
-
-**Example**
-
-  ```ts
-  this.animateItem.pause()
-  ```
-
-
-## AnimationItem.togglePause
-
-togglePause(name?: string): void
-
-Pauses or plays an animation. This API is equivalent to the switching between **play** and **pause**.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description             |
-| ---- | ------ | ---- | --------------- |
-| name | string | No   | Name of the target animation. By default, the value is null.|
-
-**Example**
-
-  ```ts
-  this.animateItem.togglePause()
-  ```
-
-
-## AnimationItem.stop
-
-stop(name?: string): void
-
-Stops an animation. When the **play** API is called next time, the animation is played from the first frame.
-
-**Parameters**
-
-| Name  | Type    | Mandatory  | Description             |
-| ---- | ------ | ---- | --------------- |
-| name | string | No   | Name of the target animation. By default, the value is null.|
-
-**Example**
-
-  ```ts
-  this.animateItem.stop()
-  ```
-
-
-## AnimationItem.setSpeed
-
-setSpeed(speed: number): void
-
-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.|
-
-**Example**
-
-  ```ts
-  this.animateItem.setSpeed(5);
-  ```
-
-
-## AnimationItem.setDirection
-
-setDirection(direction: AnimationDirection): void
-
-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.|
-
-**Example**
-
-  ```ts
-  this.animateItem.setDirection(-1)
-  ```
-
-
-## AnimationItem.goToAndStop
-
-goToAndStop(value: number, isFrame?: boolean): void
-
-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.<br>Default value: **false**|
-| name    | string  | No   | Name of the target animation. By default, the value is null.                         |
-
-**Example**
-
-  ```ts
-  // Set the animation to stop at the specified frame.
-  this.animateItem.goToAndStop(25, true)
-  // Set the animation to stop at the specified time progress.
-  this.animateItem.goToAndStop(300, false, this.animateName)
-  ```
-
-
-## AnimationItem.goToAndPlay
-
-goToAndPlay(value: number, isFrame: boolean, name?: string): void
-
-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.<br>Default value: **false**|
-| name    | string  | No   | Name of the target animation.<br>Default value: **""**                     |
-
-**Example**
-
-  ```ts
-  // Set the animation to stop at the specified frame.
-  this.animateItem.goToAndPlay(25, true)
-  // Set the animation to stop at the specified time progress.
-  this.animateItem.goToAndPlay(300, false, this.animateName)
-  ```
-
-
-## AnimationItem.playSegments
-
-playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean): void
-
-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.          |
-
-**Example**
-
-  ```ts
-  // Set the animation to play the specified segment.
-  this.animateItem.playSegments([10, 20], false)
-  // Set the animation to play the specified segment list.
-  this.animateItem.playSegments([[0, 5], [20, 30]], true)
-  ```
-
-
-## AnimationItem.resetSegments
-
-resetSegments(forceFlag: boolean): void
-
-Resets the settings configured by the **playSegments** API to play all the frames.
-
-**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.|
-
-**Example**
-
-  ```ts
-  this.animateItem.resetSegments(true)
-  ```
-
-
-## AnimationItem.resize
-
-resize(): void
-
-Resizes the animation layout.
-
-**Example**
-
-  ```ts
-  this.animateItem.resize()
-  ```
-
-
-## AnimationItem.setSubframe
-
-setSubframe(useSubFrame: boolean): void
-
-Sets the precision of the **currentFrame** attribute to display floating-point numbers.
-
-**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.|
-
-**Example**
-
-  ```ts
-  this.animateItem.setSubframe(false)
-  ```
-
-
-## AnimationItem.getDuration
-
-getDuration(inFrames?: boolean): void
-
-Obtains the duration (irrelevant to the playback speed) or number of frames for playing an animation sequence. The settings are related to the input parameter **initialSegment** of the **Lottie.loadAnimation** API.
-
-**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**|
-
-**Example**
-
-  ```ts
-  this.animateItem.getDuration(true)
-  ```
-
-
-## AnimationItem.addEventListener
-
-addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEventCallback&lt;T&gt;): () =&gt; void
-
-Adds an event listener. After the event is complete, the specified callback is triggered. This API returns the function object that can delete the 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; | Yes   | Custom callback.                               |
-
-**Example**
-
-  ```ts
-  private callbackItem: any = function() {
-      console.log("grunt loopComplete")
-  }
-  let delFunction = this.animateItem.addEventListener('loopComplete', this.animateName)
-
-  // Delete the event listener.
-  delFunction()
-  ```
-
-
-## AnimationItem.removeEventListener
-
-removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: AnimationEventCallback&lt;T&gt;): void
-
-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.           |
-
-**Example**
-
-  ```ts
-  this.animateItem.removeEventListener('loopComplete', this.animateName)
-  ```
-
-
-## AnimationItem.triggerEvent
-
-triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
-
-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.|
-
-**Example**
-
-  ```ts
-  private triggerCallBack: any = function(item) {
-      console.log("trigger loopComplete, name:" + item.name)
-  }
-
-  this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
-  this.animateItem.triggerEvent('loopComplete', this.animateItem)
-  this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)
-  ```

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

+# Matrix2D
+
+**Matrix2D** allows you to perform matrix transformation, such as scaling, rotating, and translating.
+
+>  **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.
+
+## APIs
+
+Matrix2D()
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+## Attributes
+
+| Name                     | Type  | Description                                                        |
+| ------------------------- | ------ | ------------------------------------------------------------ |
+| [scaleX](#scalex)         | number | Horizontal scale factor. Since API version 9, this API is supported in ArkTS widgets.|
+| [scaleY](#scaley)         | number | Vertical scale factor. Since API version 9, this API is supported in ArkTS widgets.|
+| [rotateX](#rotatex)       | number | Horizontal tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
+| [rotateY](#rotatey)       | number | Vertical tilt coefficient. Since API version 9, this API is supported in ArkTS widgets.|
+| [translateX](#translatex) | number | Horizontal translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
+| [translateY](#translatey) | number | Vertical translation distance, in vp. Since API version 9, this API is supported in ArkTS widgets.|
+
+>  **NOTE**
+>  
+>  You can use the [px2vp](ts-pixel-units.md) API to convert the unit.
+
+### scaleX
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DScaleX {
+  @State message: string = 'Matrix2D ScaleX'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set scaleX")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 1
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### scaleY
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DScaleY {
+  @State message: string = 'Matrix2D ScaleY'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set scaleY")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleY = 1
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### rotateX
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DRotateX {
+  @State message: string = 'Matrix2D RotateX'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set rotateX")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.rotateX = Math.sin(45 / Math.PI)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### rotateY
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DRotateY {
+  @State message: string = 'Matrix2D RotateY'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set rotateY")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.rotateY = Math.cos(45 / Math.PI)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### translateX
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DTranslateX {
+  @State message: string = 'Matrix2D TranslateX'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set translateX")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.translateX = 10
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### translateY
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DTranslateY {
+  @State message: string = 'Matrix2D TranslateY'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("Set translateY")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.translateY = 10
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+## Methods
+
+### identity
+
+identity(): Matrix2D
+
+Creates an identity matrix.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Return value**
+
+| Type                 | Description      |
+| --------------------- | ---------- |
+| [Matrix2D](#matrix2d) | Identity matrix.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DIdentity {
+  @State message: string = 'Matrix2D Identity'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix identity")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix = matrix.identity()
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### invert
+
+invert(): Matrix2D
+
+Obtains an inverse of this matrix.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Return value**
+
+| Type                 | Description        |
+| --------------------- | ------------ |
+| [Matrix2D](#matrix2d) | Inverse of the current matrix.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DInvert {
+  @State message: string = 'Matrix2D Invert'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix invert")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 2
+            matrix.scaleY = 1
+            matrix.rotateX = 0
+            matrix.rotateY = 0
+            matrix.translateX = 10
+            matrix.translateY = 20
+            matrix.invert()
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### multiply<sup>(deprecated) </sup>
+
+multiply(other?: Matrix2D): Matrix2D
+
+Multiplies this matrix by the target matrix.
+
+Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
+
+This API is deprecated since API version 10.
+
+**Parameters**
+
+| Parameter | Type    | Mandatory| Default Value| Description      |
+| ----- | -------- | ---- | ------ | ---------- |
+| other | Matrix2D | No  | null   | Target matrix.|
+
+**Return value**
+
+| Type                 | Description          |
+| --------------------- | -------------- |
+| [Matrix2D](#matrix2d) | Matrix of the multiplication result.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DMultiply {
+  @State message: string = 'Matrix2D Multiply'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix multiply")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 1
+            matrix.scaleY = 1
+            matrix.rotateX = 0
+            matrix.rotateY = 0
+            matrix.translateX = 0
+            matrix.translateY = 0
+            var other: Matrix2D = new Matrix2D()
+            other.scaleX = 2
+            other.scaleY = 2
+            other.rotateX = 0
+            other.rotateY = 0
+            other.translateX = 10
+            other.translateY = 10
+            other.multiply(other)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### rotate<sup>10+</sup>
+
+rotate(degree: number, rx?: number, ry?: number): Matrix2D
+
+Performs a right multiplication rotation operation on this matrix, with the specified rotation point as the transform origin.
+
+Since API version 10, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Parameter  | Type  | Mandatory| Default Value| Description                                                        |
+| ------ | ------ | ---- | ------ | ------------------------------------------------------------ |
+| degree | number | Yes  | 0      | Rotation angle, in radians. A positive angle denotes a clockwise rotation. You can use **Math.PI& / 180** to convert the angle to a radian value.|
+| rx     | number | No  | 0      | Horizontal coordinate (in vp) of the rotation point.                            |
+| ry     | number | No  | 0      | Vertical coordinate (in vp) of the rotation point.                            |
+
+**Return value**
+
+| Type                 | Description                |
+| --------------------- | -------------------- |
+| [Matrix2D](#matrix2d) | Matrix of the rotation result.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DRotate {
+  @State message: string = 'Matrix2D Rotate'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix rotate")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 1
+            matrix.scaleY = 1
+            matrix.rotateX = 0
+            matrix.rotateY = 0
+            matrix.translateX = 0
+            matrix.translateY = 0
+            matrix.rotate(90 / Math.PI, 10, 10)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### translate
+
+translate(tx?: number, ty?: number): Matrix2D
+
+Performs a left multiplication translation operation on this matrix.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Parameter| Type  | Mandatory| Default Value| Description                        |
+| ---- | ------ | ---- | ------ | ---------------------------- |
+| tx   | number | No  | 0      | Horizontal translation distance, in vp.|
+| ty   | number | No  | 0      | Vertical translation distance, in vp.|
+
+**Return value**
+
+| Type                 | Description                |
+| --------------------- | -------------------- |
+| [Matrix2D](#matrix2d) | Matrix of the translation result.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DTranslate {
+  @State message: string = 'Matrix2D Translate'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix translate")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 1
+            matrix.scaleY = 1
+            matrix.rotateX = 0
+            matrix.rotateY = 0
+            matrix.translateX = 0
+            matrix.translateY = 0
+            matrix.translate(100, 100)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+### scale
+
+scale(sx?: number, sy?: number): Matrix2D
+
+Performs a right multiplication scaling operation on this matrix.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Parameter| Type  | Mandatory| Default Value| Description              |
+| ---- | ------ | ---- | ------ | ------------------ |
+| sx   | number | No  | 1      | Horizontal scale factor.|
+| sy   | number | No  | 1      | Vertical scale factor.|
+
+**Return value**
+
+| Type                 | Description              |
+| --------------------- | ------------------ |
+| [Matrix2D](#matrix2d) | Matrix of the scale result.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DScale {
+  @State message: string = 'Matrix2D Scale'
+
+  printMatrix(title, matrix) {
+    console.log(title)
+    console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+                ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+                ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+  }
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(20)
+          .fontWeight(FontWeight.Bold)
+        Button("matrix scale")
+          .onClick(() => {
+            var matrix : Matrix2D = new Matrix2D()
+            matrix.scaleX = 1
+            matrix.scaleY = 1
+            matrix.rotateX = 0
+            matrix.rotateY = 0
+            matrix.translateX = 0
+            matrix.translateY = 0
+            matrix.scale(0.5, 0.5)
+            this.printMatrix(this.message, matrix)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```

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

+#  OffscreenCanvas
+
+**OffscreenCanvas** provides an offscreen canvas for drawing.
+
+When using [Canvas](ts-components-canvas-canvas.md) or [Canvas API](ts-canvasrenderingcontext2d.md), rendering, animations, and user interactions generally occur on the main thread of an application. The computation relating to canvas animations and rendering may affect application performance. **OffscreenCanvas** allows for rendering off the screen. This means that some tasks can be run in a separate thread to reduce the load on the main thread.
+
+> **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.
+
+## Child Components
+
+Not supported
+
+## APIs
+
+OffscreenCanvas(width: number, height: number)
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Name| Type| Mandatory| Default Value| Description                             |
+| ------ | -------- | ---- | ------ | ------------------------------------- |
+| width  | number   | Yes  | 0      | Width of the offscreen canvas, in vp.|
+| height | number   | Yes  | 0      | Height of the offscreen canvas, in vp.|
+
+## Attributes
+
+In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
+
+| Name  | Type  | Default Value| Description                                                        |
+| ------ | ------ | ------ | ------------------------------------------------------------ |
+| width  | number | 0      | Width of the offscreen canvas, in vp. Since API version 9, this API is supported in ArkTS widgets.|
+| height | number | 0      | Height of the offscreen canvas, in vp. Since API version 9, this API is supported in ArkTS widgets.|
+
+### width
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OffscreenCanvasPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
+
+  build() {
+    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
+      Column() {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .borderWidth(5)
+          .borderColor('#00FF00')
+          .backgroundColor('#FFFFFF')
+          .onReady(() => {
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = '#CDCDCD'
+            offContext.fillRect(0, 0, this.offCanvas.width, 150)
+            var image = this.offCanvas.transferToImageBitmap()
+            this.context.setTransform(1, 0, 0, 1, 50, 200)
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+    }.width('100%').height('100%')
+  }
+}
+```
+
+![en-us_image_0000001194032666](figures/offscreen_canvas_width.png)
+
+### height
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OffscreenCanvasPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(200, 300)
+
+  build() {
+    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
+      Column() {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .borderWidth(5)
+          .borderColor('#00FF00')
+          .backgroundColor('#FFFFFF')
+          .onReady(() => {
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = '#CDCDCD'
+            offContext.fillRect(0, 0, 100, this.offCanvas.height)
+            var image = this.offCanvas.transferToImageBitmap()
+            this.context.setTransform(1, 0, 0, 1, 50, 200)
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+    }.width('100%').height('100%')
+  }
+}
+```
+
+![en-us_image_0000001194032666](figures/offscreen_canvas_height.png)
+
+## Methods
+
+### transferToImageBitmap
+
+transferToImageBitmap(): ImageBitmap
+
+Creates an **ImageBitmap** object from the most recently rendered image of the offscreen canvas.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Return value**
+
+| Type                                              | Description                   |
+| -------------------------------------------------- | ----------------------- |
+| [ImageBitmap](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object created.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct OffscreenCanvasPage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(300, 500)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .borderWidth(5)
+        .borderColor('#00FF00')
+        .backgroundColor('#FFFFFF')
+        .onReady(() => {
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = '#CDCDCD'
+          offContext.fillRect(0, 0, 300, 500)
+          offContext.fillStyle = '#000000'
+          offContext.font = '70px serif bold'
+          offContext.fillText("Offscreen : Hello World!", 20, 60)
+          var image = this.offCanvas.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![zh-cn_image_0000001194032666](figures/offscreen_canvas_transferToImageBitmap.png)
+
+### getContext<sup>10+</sup>
+
+getContext(contextType: "2d", option?: RenderingContextSettings): OffscreenCanvasRenderingContext2D
+
+Obtains the drawing context of the offscreen canvas.
+
+**Parameters**
+
+| Name       | Type                                                        | Mandatory| Default Value| Description                                                        |
+| ----------- | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
+| contextType | string                                                       | Yes  | "2d"   | Type of the drawing context of the offscreen canvas.                       |
+| option      | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No  | -      | For details, see [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings).|
+
+**Return value**
+
+| Type                                                        | Description                             |
+| ------------------------------------------------------------ | --------------------------------- |
+| [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md) | Drawing context of the offscreen canvas.|
+
+**Example**
+
+```ts
+@Entry
+@Component
+struct OffscreenCanvasExamplePage {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(600, 800)
+
+  build() {
+    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
+      Column() {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#FFFFFF')
+          .onReady(() => {
+            var offContext = this.offscreenCanvas.getContext("2d", this.settings)
+            offContext.font = '70px sans-serif'
+            offContext.fillText("Offscreen : Hello World!", 20, 60)
+            offContext.fillStyle = "#0000ff"
+            offContext.fillRect(230, 350, 50, 50)
+            offContext.fillStyle = "#EE0077"
+            offContext.translate(70, 70)
+            offContext.fillRect(230, 350, 50, 50)
+            offContext.fillStyle = "#77EE0077"
+            offContext.translate(-70, -70)
+            offContext.fillStyle = "#00ffff"
+            offContext.rotate(45 * Math.PI / 180);
+            offContext.fillRect(180, 120, 50, 50);
+            offContext.rotate(-45 * Math.PI / 180);
+            offContext.beginPath()
+            offContext.moveTo(10, 150)
+            offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            offContext.stroke()
+            offContext.fillStyle = '#FF00FF'
+            offContext.fillRect(100, 100, 60, 60)
+            var imageData = this.offscreenCanvas.transferToImageBitmap()
+            this.context.transferFromImageBitmap(imageData)
+          })
+      }.width('100%').height('100%')
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+![en-us_image_0000001194032666](figures/offscreen_canvas.png)

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

@@ -130,7 +130,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name                      | Type                           | Description                                              |
 | ----------------------- | ----------------------------------- | ------------------------------------------- |
-| alignItems<sup>10+</sup>             | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>In **ItemAlign**, only the enumerated values **Start**, **Center**, **End**, and **Stretch** are supported.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.|
+| alignItems<sup>10+</sup>             | ItemAlign | Alignment mode of the **\<GridCol>** cross axis.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>**ItemAlign** supports the following enums: **ItemAlign.Start**, **ItemAlign.Center**, **ItemAlign.End**, and **ItemAlign.Stretch**.<br>The alignment mode of the **\<GridCol>** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.<br>Since API version 10, this API is supported in ArkTS widgets.|
 
 
 ## Events

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

@@ -42,18 +42,18 @@ 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                                                    |
+| Name                                                         | Description                                                  |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. No out-of-bounds bounce effect is triggered.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**.|
-| onScroll(event: (xOffset: number, yOffset: number) => void)  | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. The out-of-bounds bounce effect is triggered.|
-| onScrollEdge(event: (side: Edge) => void)                    | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. The out-of-bounds bounce effect is triggered.|
-| onScrollEnd<sup>(deprecated) </sup>(event: () => void)       | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
-| onScrollStart<sup>9+</sup>(event: () => void)                | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
-| onScrollStop<sup>9+</sup>(event: () => void)                 | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
+| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**. |
+| onScroll(event: (xOffset: number, yOffset: number) => void)  | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
+| onScrollEdge(event: (side: Edge) => void)                    | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
+| onScrollEnd<sup>(deprecated) </sup>(event: () => void)       | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
+| onScrollStart<sup>9+</sup>(event: () => void)                | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
+| onScrollStop<sup>9+</sup>(event: () => void)                 | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
 
 >  **NOTE**
 >
@@ -131,22 +131,24 @@ Obtains the scrolling offset.
 
 ### scrollToIndex
 
-scrollToIndex(value: number): void
-
+scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign): void
 
 Scrolls to the item with the specified index.
 
+When **smooth** is set to **true**, all passed items are loaded and counted in layout calculation. This may result in performance issues if a large number of items are involved.
+
 
 >  **NOTE**
 >
->  Only the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components are supported.
+>  This API only works for the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components.
 
 **Parameters**
 
-| Name| Type| Mandatory| Description                          |
-| ------ | -------- | ---- | ---------------------------------- |
-| value  | number   | Yes  | Index of the item to be scrolled to in the list.|
-
+| Name               | Type| Mandatory| Description                                                    |
+| --------------------- | -------- | ---- | ------------------------------------------------------------ |
+| value                 | number   | Yes  | Index of the item to be scrolled to in the list.                          |
+| smooth<sup>10+ </sup> | boolean  | No  | Whether to enable the smooth animation for scrolling to the item with the specified index. The value **true** means to enable that the smooth animation, and **false** means the opposite.<br>Default value: **false**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
+| align<sup>10+ </sup> | [ScrollAlign](#scrollalign10)  | No  | How the list item to scroll to is aligned with the list.<br>Default value: **ScrollAlign.START**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
 
 ### scrollBy<sup>9+</sup>
 
@@ -158,7 +160,7 @@ Scrolls by the specified amount.
 
 >  **NOTE**
 >
->  Only the **\<Scroll>**, **\<ScrollBar>**, **\<Grid>**, and **\<List>** components are supported.
+>  This API only works for the **\<Scroll>**, **\<ScrollBar>**, **\<Grid>**, and **\<List>** components.
 
 **Parameters**
 
@@ -167,6 +169,14 @@ Scrolls by the specified amount.
 | 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.|
 
+## ScrollAlign<sup>10+ </sup>
+
+| Name    | Description                            |
+| ------ | ------------------------------ |
+| START   | The start edge of the list item is flush with the start edge of the list. |
+| CENTER | The list item is centered along the main axis of the list.       |
+| END  | The end edge of the list item is flush with the end edge of the list.|
+| AUTO  | The list item is automatically aligned.<br>If the list item is fully contained within the display area, no adjustment is performed. Otherwise, the list item is aligned so that its start or end edge is flush with the start or end edge of the list, whichever requires a shorter scrolling distance.|
 
 ## Example
 ### Example 1

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

@@ -45,18 +45,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | cachedCount<sup>8+</sup>    | number                                   | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).|
 | disableSwipe<sup>8+</sup>   | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**                             |
 | curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
-| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
-| displayCount<sup>8+</sup>   | number \| string                                             | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
+| indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 9. You are advised to use [indicator](#indicator10) instead.|
+| displayCount<sup>8+</sup>   | number \| string                                               | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
 | effectMode<sup>8+</sup>     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)  | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
-| nextMargin<sup>10+</sup>    | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the next item is displayed, but child components cannot be loaded.        |
-| prevMargin<sup>10+</sup>    | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the previous item is displayed, but child components cannot be loaded.       |
+| displayArrow<sup>10+</sup> | value:[ArrowStyle](#arrowstyle10) \| boolean,<br>isHoverShow?: boolean | Arrow style of the navigation point indicator.<br>Default value: **false**<br>**isHoverShow**: whether to show the arrow when the mouse pointer hovers over the navigation point indicator.|
 
 ## SwiperDisplayMode
 
 | Name| Description|
 | ----------- | ------------------------------------------ |
-| Stretch     | The slide width of the **\<Swiper>** component is equal to the width of the component.|
-| AutoLinear  | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.|
+| Stretch<sup>(deprecated)</sup>     | The slide width of the **\<Swiper>** component is equal to the width of the component.<br>This API is deprecated since API version 10. You are advised to use **STRETCH** instead.|
+| AutoLinear<sup>(deprecated)</sup>   | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.<br>This API is deprecated since API version 10. You are advised to use **AUTO_LINEAR** instead.|
+| STRETCH<sup>10+</sup>     | The slide width of the **\<Swiper>** component is equal to the width of the component.|
+| AUTO_LINEAR<sup>10+</sup>  | The slide width of the **\<Swiper>** component is equal to that of the child component with the maximum width.|
 
 ## SwiperController
 
@@ -92,10 +93,10 @@ Sets the distance between the navigation point indicator and the **\<Swiper>** c
 
 | Name| Type| Mandatory.| Description                            |
 | ------ | -------- | ------ | ------------------------------------ |
-| left   | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.|
-| top    | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.|
-| right  | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.|
-| bottom | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.|
+| left   | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
+| top    | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
+| right  | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
+| bottom | [Length](ts-types.md#length)   | No    | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>Default value: **0**<br>Unit: vp|
 
 ### DotIndicator
 
@@ -122,6 +123,20 @@ Defines the navigation point indicator of the digit style, which inherits attrib
 | digitFont         | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No    | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
 | selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No    | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
 
+### ArrowStyle<sup>10+</sup>
+Describes the left and right arrow attributes.
+
+| Name       | Type| Mandatory.| Description|
+| ------------- | -------- | ------ | -------- |
+| isShowBackground   | boolean  | No| Whether to show the background for the arrow.<br>Default value: **false**|
+| isSidebarMiddle | boolean  | No| Whether the arrow is centered on both sides of the content area.<br>Default value: **false** (the arrow is shown on either side of the navigation point indicator)|
+| backgroundSize     | [Length](ts-types.md#length) | No| Size of the background.<br>Default value: **24vp**|
+| backgroundColor    | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the background.<br>Default value: **'\#19182431'**|
+| arrowSize     | [Length](ts-types.md#length) | No| Size of the arrow.<br>Default value: **18vp**|
+| arrowColor    | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the arrow.<br>Default value: **\#182431**|
+
+
+
 ## Events
 
 In addition to the [universal events](ts-universal-events-click.md), the following events are supported.

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

@@ -3,47 +3,50 @@
 Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and text offscreen onto a canvas. Drawing offscreen onto a canvas is a process where content to draw onto the canvas is first drawn in the buffer, and then converted into a picture, and finally the picture is drawn on the canvas. This process increases the drawing efficiency.
 
 >  **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.
 
 
 
 ## APIs
 
-OffscreenCanvasRenderingContext2D(width: number, height: number, setting: RenderingContextSettings)
+OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: RenderingContextSettings)
 
 Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name | Type                                                    | Mandatory| Description                            |
-| ------- | ------------------------------------------------------------ | ---- | ------------------------------------ |
-| width   | number                                                       | Yes  | Width of the offscreen canvas.                      |
-| height  | number                                                       | Yes  | Height of the offscreen canvas.                      |
-| setting | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | Yes  | See RenderingContextSettings.|
+| Name     | Type                                    | Mandatory  | Description                          |
+| -------- | ---------------------------------------- | ---- | ------------------------------ |
+| width    | number                                   | Yes   | Width of the offscreen canvas.                       |
+| height   | number                                   | Yes   | Height of the offscreen canvas.                       |
+| settings | [RenderingContextSettings](ts-canvasrenderingcontext2d.md#renderingcontextsettings) | No   | See RenderingContextSettings.|
 
 
 ## Attributes
 
-| Name                                                 | Type                                                        | Description                                                        |
-| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| [fillStyle](#fillstyle)                               | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Style to fill an area.<br>- When the type is **string**, this attribute indicates the color of the filling area.<br>- When the type is **number**, this attribute indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineWidth](#linewidth)                               | number                                                       | Line width.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [strokeStyle](#strokestyle)                           | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](#canvaspattern) | Stroke style.<br>- When the type is **string**, this attribute indicates the stroke color.<br>- When the type is **number**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineCap](#linecap)                                   | CanvasLineCap                                                | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [lineJoin](#linejoin)                                 | CanvasLineJoin                                               | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [miterLimit](#miterlimit)                             | number                                                       | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [font](#font)                                         | string                                                       | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [textAlign](#textalign)                               | CanvasTextAlign                                              | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br><br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [textBaseline](#textbaseline)                         | CanvasTextBaseline                                           | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [globalAlpha](#globalalpha)                           | number                                                       | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.                |
-| [lineDashOffset](#linedashoffset)                     | number                                                       | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [globalCompositeOperation](#globalcompositeoperation) | string                                                       | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>- Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowBlur](#shadowblur)                             | number                                                       | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowColor](#shadowcolor)                           | string                                                       | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowOffsetX](#shadowoffsetx)                       | number                                                       | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [shadowOffsetY](#shadowoffsety)                       | number                                                       | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [imageSmoothingEnabled](#imagesmoothingenabled)       | boolean                                                      | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>- Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| Name                                      | Type                                      | Description                                      |
+| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| [fillStyle](#fillstyle)                  | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.<br>- When the type is **string**, this attribute indicates the color of the filling area.<br>- When the type is **number**, this attribute indicates the color of the filling area.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineWidth](#linewidth)                  | number                                   | Line width.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [strokeStyle](#strokestyle)              | string \|number<sup>10+</sup> \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.<br>- When the type is **string**, this attribute indicates the stroke color.<br>- When the type is **number**, this attribute indicates the stroke color.<br>- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.<br>- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineCap](#linecap)                      | CanvasLineCap                            | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [lineJoin](#linejoin)                    | CanvasLineJoin                           | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [miterLimit](#miterlimit)                | number                                   | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [font](#font)                            | string                                   | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and line height. The unit must be specified and can only be px or vp.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textAlign](#textalign)                  | CanvasTextAlign                          | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br><br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [textBaseline](#textbaseline)            | CanvasTextBaseline                       | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalAlpha](#globalalpha)              | number                                   | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.               |
+| [lineDashOffset](#linedashoffset)        | number                                   | Offset of the dashed line. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [globalCompositeOperation](#globalcompositeoperation) | string                                   | Composition operation type. Available values are as follows: **'source-over'**, **'source-atop'**, **'source-in'**, **'source-out'**, **'destination-over'**, **'destination-atop'**, **'destination-in'**, **'destination-out'**, **'lighter'**, **'copy'**, and **'xor'**.<br>- Default value: **'source-over'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowBlur](#shadowblur)                | number                                   | Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.<br>- Default value: **0.0**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowColor](#shadowcolor)              | string                                   | Shadow color.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetX](#shadowoffsetx)          | number                                   | X-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [shadowOffsetY](#shadowoffsety)          | number                                   | Y-axis shadow offset relative to the original object.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.<br>- Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality                    | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**. Available values are as follows:<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.<br>Default value: **'low'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [direction](#direction)                  | CanvasDirection                          | Text direction used for drawing text. Available values are as follows:<br>- **'inherit'**: The text direction is inherited from the **\<Canvas>** component.<br>- **'ltr'**: The text direction is from left to right.<br>- **'rtl'**: The text direction is from right to left.<br>Default value: **'inherit'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [filter](#filter)                        | string                                   | Filter effect. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 > **NOTE**
 > For **fillStyle**, **shadowColor**, and **strokeStyle**, the value format of the string type is 'rgb(255, 255, 255)', 'rgba(255, 255, 255, 1.0)', '\#FFFFFF'.
@@ -706,7 +709,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -755,7 +758,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -804,7 +807,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -855,7 +858,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
@@ -905,7 +908,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.|
@@ -955,14 +958,14 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **Parameters**
 
-| Name | Type    | Mandatory  | Default Value | Description        |
+| Name  | Type    | Mandatory  | Default Value | Description        |
 | ---- | ------ | ---- | ---- | ---------- |
 | text | string | Yes   | ""   | Text to be measured.|
 
  **Return value**
 
-| Type       | Description                                                        |
-| ----------- | ------------------------------------------------------------ |
+| Type         | Description                                      |
+| ----------- | ---------------------------------------- |
 | TextMetrics | **TextMetrics** object.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 **TextMetrics** attributes
@@ -1027,7 +1030,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
 
@@ -1123,7 +1126,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1173,7 +1176,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1268,16 +1271,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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'**, **'no-repeat'**, **'clamp'**, or **'mirror'**.|
 
 **Return value**
 
-| Type                             | Description                     |
-| ------------------------------- | ----------------------- |
-| [CanvasPattern](#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
+| Type                                      | Description                     |
+| ---------------------------------------- | ----------------------- |
+| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Created pattern for image filling based on a specified source image and repetition mode.|
 
  **Example**
 
@@ -1324,7 +1327,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1378,7 +1381,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1430,7 +1433,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1483,7 +1486,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1535,16 +1538,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **Parameters**
 
-| Name          | Type     | Mandatory  | Default Value  | Description               |
-| ---------------- | ------- | ---- | ----- | ----------------- |
-| x                | number  | Yes   | 0     | X-coordinate of the ellipse center.       |
-| y                | number  | Yes   | 0     | Y-coordinate of the ellipse center.       |
-| radiusX          | number  | Yes   | 0     | Ellipse radius on the x-axis.       |
-| radiusY          | number  | Yes   | 0     | Ellipse radius on the y-axis.       |
-| rotation         | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.   |
-| startAngle       | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.|
-| endAngle         | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.|
-| counterclockwise | boolean | No   | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.    |
+| Name              | Type     | Mandatory  | Default Value  | Description                                      |
+| ---------------- | ------- | ---- | ----- | ---------------------------------------- |
+| x                | number  | Yes   | 0     | X-coordinate of the ellipse center.                              |
+| y                | number  | Yes   | 0     | Y-coordinate of the ellipse center.                              |
+| radiusX          | number  | Yes   | 0     | Ellipse radius on the x-axis.                              |
+| radiusY          | number  | Yes   | 0     | Ellipse radius on the y-axis.                              |
+| rotation         | number  | Yes   | 0     | Rotation angle of the ellipse. The unit is radian.                          |
+| startAngle       | number  | Yes   | 0     | Angle of the start point for drawing the ellipse. The unit is radian.                       |
+| endAngle         | number  | Yes   | 0     | Angle of the end point for drawing the ellipse. The unit is radian.                       |
+| counterclockwise | boolean | No   | false | Whether to draw the ellipse counterclockwise.<br>**true**: Draw the ellipse counterclockwise.<br>**false**: Draw the ellipse clockwise.|
 
  **Example**
 
@@ -1589,7 +1592,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1639,7 +1642,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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"**.|
 
@@ -1682,7 +1685,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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"**.|
@@ -1741,7 +1744,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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"**.|
 
@@ -1789,9 +1792,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name  | Type            | Mandatory  | Default Value      | Description                                      |
+| Name      | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
-| path | Path2D | Yes   |  | A **Path2D** path to clip.|
+| 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**
@@ -1841,15 +1844,77 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 filter(filter: string): void
 
-Sets a filter for the image on the canvas. This API is a void API.
+Sets a filter for the image on the canvas.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name | Type    | Mandatory  | Default Value | Description          |
-| ------ | ------ | ---- | ---- | ------------ |
-| filter | string | Yes   | -    | Functions that accept various filter effects.|
+| Name    | Type    | Mandatory  | Default Value | Description                                      |
+| ------ | ------ | ---- | ---- | ---------------------------------------- |
+| filter | string | Yes   | -    | Functions that accept various filter effects. Available values are as follows:<br>- **'none'**: no filter effect.<br>- **'blur'**: applies the Gaussian blur for the image.<br>- **'brightness'**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **'contrast'**: adjusts the image contrast.<br>- **'grayscale'**: converts the image to a grayscale image.<br>- **'hue-rotate'**: applies hue rotation to the image.<br>- **'invert'**: inverts the input image.<br>- **'opacity'**: sets the opacity of the image.<br>- **'saturate'**: sets the saturation of the image.<br>- **'sepia'**: converts the image to dark brown.<br>Default value: **'none'**|
+
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct FilterDemoOff {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let offctx = this.offContext
+            let img = this.img
+
+            offctx.drawImage(img, 0, 0, 100, 100);
+
+            offctx.filter = 'grayscale(50%)';
+            offctx.drawImage(img, 100, 0, 100, 100);
+
+            offctx.filter = 'sepia(60%)';
+            offctx.drawImage(img, 200, 0, 100, 100);
+
+            offctx.filter = 'saturate(30%)';
+            offctx.drawImage(img, 0, 100, 100, 100);
+
+            offctx.filter = 'hue-rotate(90degree)';
+            offctx.drawImage(img, 100, 100, 100, 100);
+
+            offctx.filter = 'invert(100%)';
+            offctx.drawImage(img, 200, 100, 100, 100);
+
+            offctx.filter = 'opacity(25%)';
+            offctx.drawImage(img, 0, 200, 100, 100);
+
+            offctx.filter = 'brightness(0.4)';
+            offctx.drawImage(img, 100, 200, 100, 100);
+
+            offctx.filter = 'contrast(200%)';
+            offctx.drawImage(img, 200, 200, 100, 100);
+
+            offctx.filter = 'blur(5px)';
+            offctx.drawImage(img, 0, 300, 100, 100);
+
+            var image = offctx.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![filterDemo](figures/filterDemo.jpeg)
 
 
 ### getTransform
@@ -1860,6 +1925,11 @@ Obtains the current transformation matrix being applied to the context. This API
 
 Since API version 9, this API is supported in ArkTS widgets.
 
+**Return value**
+
+| Type                                      | Description   |
+| ---------------------------------------- | ----- |
+| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.|
 
 ### resetTransform
 
@@ -1874,10 +1944,48 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 direction(direction: CanvasDirection): void
 
-Sets the text direction for drawing text. This API is a void API.
+Sets the text direction for drawing text.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct DirectionDemoOff {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let offctx = this.offContext
+            offctx.font = '48px serif';
+            offctx.textAlign = 'start'
+            offctx.fillText("Hi ltr!", 200, 50);
+
+            offctx.direction = "rtl";
+            offctx.fillText("Hi rtl!", 200, 100);
+
+            var image = offctx.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![directionDemo](figures/directionDemo.jpeg)
+
+
 
 ### rotate
 
@@ -1889,7 +1997,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
 
@@ -1936,7 +2044,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -1985,7 +2093,6 @@ Defines a transformation matrix. To transform a graph, you only need to set para
 Since API version 9, this API is supported in ArkTS widgets.
 
 > **NOTE**
->
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
 >
 > - x' = scaleX \* x + skewY \* y + translateX
@@ -1994,7 +2101,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.     |
@@ -2052,7 +2159,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **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.     |
@@ -2107,7 +2214,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -2160,7 +2267,7 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel
 
  **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.         |
@@ -2229,7 +2336,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
 
@@ -2247,7 +2354,7 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi
 
  **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.|
@@ -2268,7 +2375,7 @@ Draws the input [PixelMap](../apis/js-apis-image.md#pixelmap7) object on the can
 
  **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.|
@@ -2292,7 +2399,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -2343,9 +2450,9 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 ### putImageData
 
-putImageData(imageData: Object, dx: number, dy: number): void
+putImageData(imageData: Object, dx: number | string, dy: number | string): void
 
-putImageData(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth?: number, dirtyHeight: number): void
+putImageData(imageData: Object, dx: number | string, dy: number | string, dirtyX: number | string, dirtyY: number | string, dirtyWidth?: number | string, dirtyHeight: number | string): void
 
 Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
 
@@ -2353,15 +2460,15 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **Parameters**
 
-| 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.               |
-| dy          | number | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
-| dirtyX      | number | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
-| dirtyY      | number | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
-| 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.              |
+| Name         | Type                                      | Mandatory  | Default Value         | Description                           |
+| ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
+| imagedata   | Object                                   | Yes   | null         | **ImageData** object with pixels to put onto the canvas.           |
+| dx          | number \| string<sup>10+</sup> | Yes   | 0            | X-axis offset of the rectangular area on the canvas.               |
+| dy          | number \| string<sup>10+</sup> | Yes   | 0            | Y-axis offset of the rectangular area on the canvas.               |
+| dirtyX      | number \| string<sup>10+</sup> | No   | 0            | X-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyY      | number \| string<sup>10+</sup> | No   | 0            | Y-axis offset of the upper left corner of the rectangular area relative to that of the source image.|
+| dirtyWidth  | number \| string<sup>10+</sup> | No   | Width of the **ImageData** object| Width of the rectangular area to crop the source image.              |
+| dirtyHeight | number \| string<sup>10+</sup> | No   | Height of the **ImageData** object| Height of the rectangular area to crop the source image.              |
 
  **Example**
 
@@ -2410,7 +2517,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 **Parameters**
 
-| Name  | Type      | Description                 |
+| Name      | Type      | Description                 |
 | -------- | -------- | ------------------- |
 | segments | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
 
@@ -2558,16 +2665,50 @@ Since API version 9, this API is supported in ArkTS widgets.
 
 imageSmoothingQuality(quality: imageSmoothingQuality)
 
-Sets the quality of image smoothing. This API is a void API.
+Sets the quality of image smoothing.
 
 Since API version 9, this API is supported in ArkTS widgets.
 
  **Parameters**
 
-| Name | Type                   | Description                                      |
+| Name     | Type                   | Description                                      |
 | ------- | --------------------- | ---------------------------------------- |
-| quality | imageSmoothingQuality | Quality of image smoothing. The value can be **'low'**, **'medium'**,or **'high'**.|
+| quality | imageSmoothingQuality | Quality of image smoothing.<br>- **'low'**: low quality.<br>- **'medium'**: medium quality.<br>- **'high'**: high quality.|
+
+**Example**
+```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct ImageSmoothingQualityDemoOff {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
 
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            let offctx = this.offContext
+            offctx.imageSmoothingEnabled = true
+            offctx.imageSmoothingQuality = 'high'
+            offctx.drawImage(this.img, 0, 0, 400, 200)
+
+            var image = offctx.transferToImageBitmap()
+            this.context.transferFromImageBitmap(image)
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+```
+
+![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg)
 
 ### transferToImageBitmap
 
@@ -2715,7 +2856,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
  **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.|
@@ -2769,7 +2910,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 
   **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.        |
@@ -2822,11 +2963,11 @@ Creates a conic gradient.
 
 **Parameters**
 
-| Name      | Type  | Mandatory| Default Value| Description                                                        |
-| ---------- | ------ | ---- | ------ | ------------------------------------------------------------ |
-| startAngle | number | Yes  | 0      | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
-| x          | number | Yes  | 0      | X-coordinate of the center of the conic gradient, in vp.                             |
-| y          | number | Yes  | 0      | Y-coordinate of the center of the conic gradient, in vp.                             |
+| Name        | Type    | Mandatory  | Default Value | Description                                 |
+| ---------- | ------ | ---- | ---- | ----------------------------------- |
+| startAngle | number | Yes   | 0    | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.|
+| x          | number | Yes   | 0    | X-coordinate of the center of the conic gradient, in vp.                  |
+| y          | number | Yes   | 0    | Y-coordinate of the center of the conic gradient, in vp.                  |
 
 **Example**
 
@@ -2864,9 +3005,3 @@ struct OffscreenCanvasConicGradientPage {
 ```
 
   ![en-us_image_0000001239032419](figures/en-us_image_0000001239032420.png)
-
-## CanvasPattern
-
-Defines an object created using the **[createPattern](#createpattern)** API.
-
-Since API version 9, this API is supported in ArkTS widgets.

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

+# Click Effect
+
+You can set the click effect for a component to define how it behaves when clicked.
+
+>  **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+### Attributes
+
+| Name       | Type           | Description                                                        |
+| ----------- | ------------------- | ------------------------------------------------------------ |
+| clickEffect | [ClickEffect](#clickeffect) \| null | Click effect of the component.<br>**NOTE**<br>The click effect is revoked when this attribute is set to **null**.|
+
+### ClickEffect
+
+| Name | Type                                                   | Mandatory| Description                                                        |
+| ----- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| level | [ClickEffectLevel](ts-appendix-enums.md#clickeffectlevel10) | Yes  | Click effect of the component.<br>Default value: **ClickEffectLevel.LIGHT**|
+| scale | number                                                      | No  | Zoom ratio. This parameter works based on the setting of **ClickEffectLevel**.<br>**NOTE**<br>The default value of this parameter varies by the value of **level**.<br>- If **level** is set to **ClickEffectLevel.LIGHT**, the default value is **0.90**.<br>- If **level** is set to **ClickEffectLevel.MIDDLE** or **ClickEffectLevel.HEAVY**, the default value is **0.95**. |
+
+### Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ToggleExample {
+  build() {
+    Column({ space: 10 }) {
+      Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Switch, isOn: false })
+          .clickEffect({level:ClickEffectLevel.LIGHT})
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+
+        Toggle({ type: ToggleType.Switch, isOn: true })
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .selectedColor('#007DFF')
+          .switchPointColor('#FFFFFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+      }
+
+      Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Checkbox, isOn: false })
+          .clickEffect({level:ClickEffectLevel.MIDDLE})
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+
+        Toggle({ type: ToggleType.Checkbox, isOn: true })
+          .clickEffect({level:ClickEffectLevel.MIDDLE, scale: 0.5})
+          .size({ width: 20, height: 20 })
+          .selectedColor('#007DFF')
+          .onChange((isOn: boolean) => {
+            console.info('Component status:' + isOn)
+          })
+      }
+
+      Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
+      Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
+        Toggle({ type: ToggleType.Button, isOn: false }) {
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .clickEffect({level:ClickEffectLevel.HEAVY})
+        .selectedColor('rgba(0,125,255,0.20)')
+        .onChange((isOn: boolean) => {
+          console.info('Component status:' + isOn)
+        })
+
+        Toggle({ type: ToggleType.Button, isOn: true }) {
+          Text('status button').fontColor('#182431').fontSize(12)
+        }.width(106)
+        .clickEffect({level:ClickEffectLevel.HEAVY, scale: 0.5})
+        .selectedColor('rgba(0,125,255,0.20)')
+        .onChange((isOn: boolean) => {
+          console.info('Component status:' + isOn)
+        })
+      }
+    }.width('100%').padding(24)
+  }
+}
+```
+
+![clickeffect](figures/clickeffect.gif)

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

+# Obscuring
+
+When needed, you can obscure content of a component.
+
+>  **NOTE**
+>
+> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Attributes
+
+
+| Name   | Type                                    | Description                                 |
+| -----| ------------------------------------------ | ------------------------------------ |
+| obscured | Array<[ObscuredReasons](ts-appendix-enums.md#obscuredreasons10)> | How the component content is obscured.<br>Default value: **[]**<br>This API is supported in ArkTS widgets.<br>This API only works for the [\<Image>](ts-basic-components-image.md) and [\<Text>](ts-basic-components-text.md) components.<br>**NOTE**<br>To obscure an image when it is being loaded, you must set the width and height of the **\<Image>** component. |
+
+## Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ObscuredExample {
+  build() {
+    Row() {
+      Column() {
+        Text('Text not set obscured attribute').fontSize(10).fontColor(Color.Black)
+        Text('This is an example for text obscured attribute.')
+          .fontSize(30)
+          .width('600px')
+          .fontColor(Color.Black)
+          .border({ width: 1 })
+        Text('Image not set obscured attribute').fontSize(10).fontColor(Color.Black)
+        Image($r('app.media.icon'))
+          .width('200px')
+          .height('200px')
+        Text('Text set obscured attribute').fontSize(10).fontColor(Color.Black)
+        Text('This is an example for text obscured attribute.')
+          .fontSize(30)
+          .width('600px')
+          .fontColor(Color.Black)
+          .border({ width: 1 })
+          .obscured([ObscuredReasons.PLACEHOLDER])
+        Text('Image set obscured attribute').fontSize(10).fontColor(Color.Black)
+        Image($r('app.media.icon'))
+          .width('200px')
+          .height('200px')
+          .obscured([ObscuredReasons.PLACEHOLDER])
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+![obscured](figures/obscured.png)