Merge branch 'master' of gitee.com:openharmony/docs into 9620-d

Signed-off-by: Nshawn_he <shawn.he@huawei.com>

CODEOWNERS

@@ -177,9 +177,9 @@ zh-cn/application-dev/napi/napi-guidelines.md @RayShih
 zh-cn/application-dev/napi/drawing-guidelines.md @ge-yafang
 zh-cn/application-dev/napi/rawfile-guidelines.md @HelloCrease
 zh-cn/application-dev/reference/js-service-widget-ui/ @HelloCrease
-zh-cn/application-dev/website.md @zengyawen
 zh-cn/application-dev/faqs/ @zengyawen
 zh-cn/application-dev/file-management/ @qinxiaowang
+zh-cn/application-dev/application-test/ @HelloCrease
 
 zh-cn/application-dev/reference/apis/js-apis-DataUriUtils.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-ability-errorCode.md @RayShih
@@ -225,7 +225,7 @@ zh-cn/application-dev/reference/apis/js-apis-application-shellCmdResult.md @RayS
 zh-cn/application-dev/reference/apis/js-apis-commonEvent.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-emitter.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-notification.md @RayShih
-zh-cn/application-dev/reference/apis/js-apis-reminderAgent.md @RayShih
+zh-cn/application-dev/reference/apis/js-apis-reminderAgent.md @HelloCrease
 zh-cn/application-dev/reference/apis/js-apis-eventhub.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-Bundle.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-deviceUsageStatistics.md @RayShih
@@ -369,7 +369,6 @@ zh-cn/application-dev/reference/apis/js-apis-useriam-faceauth.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-userfilemanager.md @qinxiaowang
 zh-cn/application-dev/reference/apis/js-apis-cryptoFramework.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-buffer.md @zengyawen
-zh-cn/application-dev/reference/apis/Readme-CN.md @zengyawen
 zh-cn/application-dev/reference/apis/development-intro.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-accessibility-extension-context.md @RayShih
 zh-cn/application-dev/reference/apis/js-apis-application-abilityLifecycleCallback.md @RayShih
@@ -445,3 +444,5 @@ zh-cn/application-dev/reference/apis/js-apis-net-policy.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-net-sharing.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-net-statistics.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-tlsSocket.md @zengyawen
+zh-cn/application-dev/reference/apis/js-apis-reminderAgentManager.md @HelloCrease
+zh-cn/application-dev/reference/apis/js-apis-hiviewdfx-hiappevent.md @zengyawen

en/application-dev/ability/context-userguide.md

@@ -235,13 +235,13 @@ export default class MainAbility extends Ability {
 
 For details, see [FormExtensionContext](../reference/apis/js-apis-formextensioncontext.md).
 
-### Obtaining the Context on an eTS Page
+### Obtaining the Context on an ArkTS Page
 
-In the stage model, in the `onWindowStageCreate` lifecycle of an ability, you can call `SetUIContent` of `WindowStage` to load an eTS page. In some scenarios, you need to obtain the context on the page to call related APIs.
+In the stage model, in the `onWindowStageCreate` lifecycle of an ability, you can call `SetUIContent` of `WindowStage` to load an ArkTS page. In some scenarios, you need to obtain the context on the page to call related APIs.
 
 **How to Obtain**
 
-Use the API described in the table below to obtain the context associated with an eTS page.
+Use the API described in the table below to obtain the context associated with an ArkTS page.
 
 | API                                  | Description                          |
 | :------------------------------------ | :--------------------------- |

en/application-dev/ability/fa-serviceability.md

@@ -92,7 +92,7 @@ After the preceding code is executed, the **startAbility()** API is called to st
 - If the Service ability is not running, the system calls **onStart()** to initialize the Service ability, and then calls **onCommand()** on the Service ability.
 - If the Service ability is running, the system directly calls **onCommand()** on the Service ability.
 
-The following code snippet shows how to start a Service ability running on the remote device. For details about **getRemoteDeviceId()**, see [Connecting to a Remote Service Ability](#connecting-to-a-remote-service-ability-applying-only-to-system-applications).
+The following code snippet shows how to start a Service ability running on the remote device. For details about **getRemoteDeviceId()**, see [Connecting to a Remote Service Ability](#connecting-to-a-remote-service-ability).
 
 ```javascript
 import featureAbility from '@ohos.ability.featureAbility';

en/application-dev/internationalization/i18n-guidelines.md

@@ -9,15 +9,15 @@ You can use APIs provided in the following table to obtain the system language a
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.i18n | getSystemLanguage(): string | Obtains the system language. | 
-| ohos.i18n | getSystemRegion(): string | Obtains the system region. | 
-| ohos.i18n | getSystemLocale(): string | Obtains the system locale. | 
-| ohos.i18n | isRTL(locale: string): boolean<sup>7+</sup> | Checks whether the locale uses a right-to-left (RTL) language. | 
-| ohos.i18n | is24HourClock(): boolean<sup>7+</sup> | Checks whether the system uses a 24-hour clock. | 
-| ohos.i18n | getDisplayLanguage(language: string, locale: string, sentenceCase?: boolean): string | Obtains the localized display of a language. | 
-| ohos.i18n | getDisplayCountry(country: string, locale: string, sentenceCase?: boolean): string | Obtains the localized display of a country name. | 
+| ohos.i18n | getSystemLanguage(): string | Obtains the system language. |
+| ohos.i18n | getSystemRegion(): string | Obtains the system region. |
+| ohos.i18n | getSystemLocale(): string | Obtains the system locale. |
+| ohos.i18n | isRTL(locale: string): boolean<sup>7+</sup> | Checks whether the locale uses a right-to-left (RTL) language. |
+| ohos.i18n | is24HourClock(): boolean<sup>7+</sup> | Checks whether the system uses a 24-hour clock. |
+| ohos.i18n | getDisplayLanguage(language: string, locale: string, sentenceCase?: boolean): string | Obtains the localized display of a language. |
+| ohos.i18n | getDisplayCountry(country: string, locale: string, sentenceCase?: boolean): string | Obtains the localized display of a country name. |
 
 
 ### How to Develop
@@ -26,7 +26,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **getSystemLanguage** method to obtain the system language (**i18n** is the name of the imported module).
 
-   
+
     ```js
    var language = i18n.getSystemLanguage();
    ```
@@ -42,7 +42,7 @@ You can use APIs provided in the following table to obtain the system language a
 3. Obtain the system locale.
 
     Call the **getSystemLocale** method to obtain the system locale.
-     
+    
     ```js
    var locale = i18n.getSystemLocale();
    ```
@@ -51,7 +51,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **isRTL** method to check whether the locale's language is RTL.
 
-   
+
     ```js
    var rtl = i18n.isRTL("zh-CN");
    ```
@@ -67,7 +67,7 @@ You can use APIs provided in the following table to obtain the system language a
 6. Obtain the localized display of a language.
 
     Call the **getDisplayLanguage** method to obtain the localized display of a language. **language** indicates the language to be localized, **locale** indicates the locale, and **sentenceCase** indicates whether the first letter of the result must be capitalized.
-     
+    
     ```js
    var language = "en";
    var locale = "zh-CN";
@@ -78,7 +78,7 @@ You can use APIs provided in the following table to obtain the system language a
 7. Obtain the localized display of a country.
 
     Call the **getDisplayCountry** method to obtain the localized display of a country name. **country** indicates the country code (a two-letter code in compliance with ISO-3166, for example, CN), **locale** indicates the locale, and **sentenceCase** indicates whether the first letter of the result must be capitalized.
-     
+    
     ```js
    var country = "US";
    var locale = "zh-CN";
@@ -116,7 +116,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **getCalendar** method to obtain the time zone object of a specific locale and type (**i18n** is the name of the imported module). **type** indicates the valid calendar type, for example, **buddhist**, **chinese**, **coptic**, **ethiopic**, **hebrew**, **gregory**, **indian**, **islamic_civil**, **islamic_tbla**, **islamic_umalqura**, **japanese**, and **persian**. If **type** is left unspecified, the default calendar type of the locale is used.
 
-   
+
     ```js
    var calendar = i18n.getCalendar("zh-CN", "gregory");
    ```
@@ -135,7 +135,7 @@ You can use APIs provided in the following table to obtain the system language a
 3. Set the year, month, day, hour, minute, and second for the **Calendar** object.
 
     Call the **set** method to set the year, month, day, hour, minute, and second for the **Calendar** object.
-     
+    
     ```js
    calendar.set(2021, 12, 21, 6, 0, 0)
    ```
@@ -144,7 +144,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **setTimeZone** and **getTimeZone** methods to set and obtain the time zone for the **Calendar** object. The **setTimeZone** method requires an input string to indicate the time zone to be set.
 
-   
+
     ```js
    calendar.setTimeZone("Asia/Shanghai");
    var timezone = calendar.getTimeZone();
@@ -163,7 +163,7 @@ You can use APIs provided in the following table to obtain the system language a
 6. Set and obtain the minimum count of days in the first week for the **Calendar** object.
 
     Call the **setMinimalDaysInFirstWeek** and **getMinimalDaysInFirstWeek** methods to set and obtain the minimum count of days in the first week for the **Calendar** object.
-     
+    
     ```js
    calendar.setMinimalDaysInFirstWeek(3);
    var minimalDaysInFirstWeek = calendar.getMinimalDaysInFirstWeek();
@@ -173,7 +173,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **getDisplayName** method to obtain the localized display of the **Calendar** object.
 
-   
+
     ```js
    var localizedName = calendar.getDisplayName("zh-CN");
    ```
@@ -196,11 +196,11 @@ You can use APIs provided in the following table to obtain the system language a
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.i18n | constructor(country: string, options?: PhoneNumberFormatOptions)<sup>8+</sup> | Instantiates a **PhoneNumberFormat** object. | 
-| ohos.i18n | isValidNumber(number: string): boolean<sup>8+</sup> | Checks whether the value of **number** is a phone number in the correct format. | 
-| ohos.i18n | format(number: string): string<sup>8+</sup> | Formats the value of **number** based on the specified country and style. | 
+| ohos.i18n | constructor(country: string, options?: PhoneNumberFormatOptions)<sup>8+</sup> | Instantiates a **PhoneNumberFormat** object. |
+| ohos.i18n | isValidNumber(number: string): boolean<sup>8+</sup> | Checks whether the value of **number** is a phone number in the correct format. |
+| ohos.i18n | format(number: string): string<sup>8+</sup> | Formats the value of **number** based on the specified country and style. |
 
 
 ### How to Develop
@@ -209,7 +209,7 @@ You can use APIs provided in the following table to obtain the system language a
 
     Call the **PhoneNumberFormat** constructor to instantiate a **PhoneNumberFormat** object. The country code and formatting options of the phone number need to be passed into this constructor. The formatting options are optional, including a style option. Values of this option include: **E164**, **INTERNATIONAL**, **NATIONAL**, and **RFC3966**.
 
-   
+
     ```js
    var phoneNumberFormat = new i18n.PhoneNumberFormat("CN", {type: "E164"});
    ```
@@ -223,7 +223,7 @@ You can use APIs provided in the following table to obtain the system language a
 
 3. Format a phone number.
     Call the **format** method of **PhoneNumberFormat** to format the input phone number.
-     
+    
     ```js
    var formattedNumber = phoneNumberFormat.format("15812341234");
    ```
@@ -236,15 +236,15 @@ The **unitConvert** API is provided to help you implement measurement conversion
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.i18n | unitConvert(fromUnit: UnitInfo, toUnit: UnitInfo, value: number, locale: string, style?: string): string<sup>8+</sup> | Converts one measurement unit (**fromUnit**) into another (**toUnit**) and formats the unit based on the specified locale and style. | 
+| ohos.i18n | unitConvert(fromUnit: UnitInfo, toUnit: UnitInfo, value: number, locale: string, style?: string): string<sup>8+</sup> | Converts one measurement unit (**fromUnit**) into another (**toUnit**) and formats the unit based on the specified locale and style. |
 
 
 ### How to Develop
 
 1. Convert a measurement unit.
-   Call the [unitConvert](../reference/apis/js-apis-i18n.md#unitconvert8) method to convert a measurement unit and format the display result.
+   Call the [unitConvert](../reference/apis/js-apis-i18n.md#unitconvert9) method to convert a measurement unit and format the display result.
 
    
     ```js
@@ -254,7 +254,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
    var locale = "en-US";
    var style = "long";
    i18n.Util.unitConvert(fromUtil, toUtil, number, locale, style);
-   ```
+    ```
 
 
 ## Alphabet Index
@@ -278,7 +278,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
 
     Call the **getInstance** method to instantiate an **IndexUtil** object for a specific locale. When the **locale** parameter is empty, instantiate an **IndexUtil** object of the default locale.
 
-   
+
     ```js
    var indexUtil = i18n.getInstance("zh-CN");
    ```
@@ -294,7 +294,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
 3. Add an index.
 
     Call the **addLocale** method to add the alphabet index of a new locale to the current index list.
-     
+    
     ```js
    indexUtil.addLocale("ar")
    ```
@@ -302,7 +302,7 @@ The **unitConvert** API is provided to help you implement measurement conversion
 4. Obtain the index of a string.
 
     Call the **getIndex** method to obtain the alphabet index of a string.
-     
+    
     ```js
    var text = "access index";
    indexUtil.getIndex(text);
@@ -336,7 +336,7 @@ When a text is displayed in more than one line, [BreakIterator8](../reference/ap
 
     Call the **getLineInstance** method to instantiate a **BreakIterator** object.
 
-   
+
     ```js
    var locale = "en-US"
    var breakIterator = i18n.getLineInstance(locale);
@@ -357,7 +357,7 @@ When a text is displayed in more than one line, [BreakIterator8](../reference/ap
 
     Call the **current** method to obtain the current position of the **BreakIterator** object in the text being processed.
 
-   
+
     ```js
    var pos = breakIterator.current();
    ```
@@ -383,7 +383,9 @@ When a text is displayed in more than one line, [BreakIterator8](../reference/ap
 
     Call the **isBoundary** method to determine whether a position is a break point. If yes, **true** is returned and the **BreakIterator** object is moved to this position. If no, **false** is returned and the **BreakIterator** object is moved to a break point after this position.
 
-   
+
     ```js
    var isboundary = breakIterator.isBoundary(5);
    ```
+
+   ```
\ No newline at end of file

en/application-dev/internationalization/intl-guidelines.md

@@ -13,13 +13,13 @@ Use [Locale](../reference/apis/js-apis-intl.md#locale) APIs to maximize or minim
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Instantiates a **Locale** object. | 
-| ohos.intl | constructor(locale?: string, options?: options) | Instantiates a **Locale** object based on the locale parameter and options. | 
-| ohos.intl | toString(): string | Converts locale information into a string. | 
-| ohos.intl | maximize(): Locale | Maximizes locale information. | 
-| ohos.intl | minimize(): Locale | Minimizes locale information. | 
+| ohos.intl | constructor()<sup>8+</sup> | Instantiates a **Locale** object. |
+| ohos.intl | constructor(locale?: string, options?: options) | Instantiates a **Locale** object based on the locale parameter and options. |
+| ohos.intl | toString(): string | Converts locale information into a string. |
+| ohos.intl | maximize(): Locale | Maximizes locale information. |
+| ohos.intl | minimize(): Locale | Minimizes locale information. |
 
 
 ### How to Develop
@@ -81,13 +81,13 @@ Use [DateTimeFormat](../reference/apis/js-apis-intl.md#datetimeformat) APIs to f
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Creates a **DateTimeFormat** object. | 
-| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: DateTimeOptions) | Creates a **DateTimeFormat** object and sets the locale and other formatting-related attributes. | 
-| ohos.intl | format(date: Date): string | Calculates the date and time based on the locale and other formatting-related attributes of the **DateTimeFormat** object. | 
-| ohos.intl | formatRange(startDate: Date, endDate: Date): string | Calculates the period based on the locale and other formatting-related attributes of the **DateTimeFormat** object. | 
-| ohos.intl | resolvedOptions(): DateTimeOptions | Obtains the related attributes of the **DateTimeFormat** object. | 
+| ohos.intl | constructor()<sup>8+</sup> | Creates a **DateTimeFormat** object. |
+| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: DateTimeOptions) | Creates a **DateTimeFormat** object and sets the locale and other formatting-related attributes. |
+| ohos.intl | format(date: Date): string | Calculates the date and time based on the locale and other formatting-related attributes of the **DateTimeFormat** object. |
+| ohos.intl | formatRange(startDate: Date, endDate: Date): string | Calculates the period based on the locale and other formatting-related attributes of the **DateTimeFormat** object. |
+| ohos.intl | resolvedOptions(): DateTimeOptions | Obtains the related attributes of the **DateTimeFormat** object. |
 
 
 ### How to Develop
@@ -144,12 +144,12 @@ Use [NumberFormat](../reference/apis/js-apis-intl.md#numberformat) APIs to forma
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Creates a **NumberFormat** object. | 
-| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: NumberOptions) | Creates a **NumberFormat** object and sets the locale and other formatting-related attributes. | 
-| ohos.intl | format(number: number): string | Calculates the number based on the locale and other formatting-related attributes of the **NumberFormat** object. | 
-| ohos.intl | resolvedOptions(): NumberOptions | Obtains attributes of the **NumberFormat** object. | 
+| ohos.intl | constructor()<sup>8+</sup> | Creates a **NumberFormat** object. |
+| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: NumberOptions) | Creates a **NumberFormat** object and sets the locale and other formatting-related attributes. |
+| ohos.intl | format(number: number): string | Calculates the number based on the locale and other formatting-related attributes of the **NumberFormat** object. |
+| ohos.intl | resolvedOptions(): NumberOptions | Obtains attributes of the **NumberFormat** object. |
 
 
 ### How to Develop
@@ -195,12 +195,12 @@ Use [Collator](../reference/apis/js-apis-intl.md#collator8) APIs to sort strings
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Creates a **Collator** object. | 
-| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: CollatorOptions)<sup>8+</sup> | Creates a **Collator** object and sets the locale and other related attributes. | 
-| ohos.intl | compare(first: string, second: string): number<sup>8+</sup> | Calculates the comparison result of two strings based on the locale and other attributes of the **Collator** object. | 
-| ohos.intl | resolvedOptions(): CollatorOptions<sup>8+</sup> | Obtains attributes of the **Collator** object. | 
+| ohos.intl | constructor()<sup>8+</sup> | Creates a **Collator** object. |
+| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: CollatorOptions)<sup>8+</sup> | Creates a **Collator** object and sets the locale and other related attributes. |
+| ohos.intl | compare(first: string, second: string): number<sup>8+</sup> | Calculates the comparison result of two strings based on the locale and other attributes of the **Collator** object. |
+| ohos.intl | resolvedOptions(): CollatorOptions<sup>8+</sup> | Obtains attributes of the **Collator** object. |
 
 
 ### How to Develop
@@ -214,7 +214,7 @@ Use [Collator](../reference/apis/js-apis-intl.md#collator8) APIs to sort strings
    var collator = new intl.Collator();
    ```
 
-   Alternatively, use your own locale and formatting parameters to create a **Collator** object. For a full list of parameters, see [CollatorOptions](../reference/apis/js-apis-intl.md#collatoroptions8).
+   Alternatively, use your own locale and formatting parameters to create a **Collator** object. For a full list of parameters, see [CollatorOptions](../reference/apis/js-apis-intl.md#collatoroptions9).
    
    ```js
    var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"});
@@ -246,11 +246,11 @@ Use [PluralRules](../reference/apis/js-apis-intl.md#pluralrules8) APIs to determ
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Creates a **PluralRules** object. | 
-| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: PluralRulesOptions)<sup>8+</sup> | Creates a **PluralRules** object and sets the locale and other related attributes. | 
-| ohos.intl | select(n: number): string<sup>8+</sup> | Determines the singular-plural type based on the locale and other formatting-related attributes of the **PluralRules** object. | 
+| ohos.intl | constructor()<sup>8+</sup> | Creates a **PluralRules** object. |
+| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: PluralRulesOptions)<sup>8+</sup> | Creates a **PluralRules** object and sets the locale and other related attributes. |
+| ohos.intl | select(n: number): string<sup>8+</sup> | Determines the singular-plural type based on the locale and other formatting-related attributes of the **PluralRules** object. |
 
 
 ### How to Develop
@@ -264,7 +264,7 @@ Use [PluralRules](../reference/apis/js-apis-intl.md#pluralrules8) APIs to determ
    var pluralRules = new intl.PluralRules();
    ```
 
-   Alternatively, use your own locale and formatting parameters to create a **PluralRules** object. For a full list of parameters, see [PluralRulesOptions](../reference/apis/js-apis-intl.md#pluralrulesoptions8).
+   Alternatively, use your own locale and formatting parameters to create a **PluralRules** object. For a full list of parameters, see [PluralRulesOptions](../reference/apis/js-apis-intl.md#pluralrulesoptions9).
    
    ```js
    var pluralRules = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"});
@@ -287,13 +287,13 @@ Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md#relativetimeformat8)
 
 ### Available APIs
 
-| Module | API | Description | 
+| Module | API | Description |
 | -------- | -------- | -------- |
-| ohos.intl | constructor()<sup>8+</sup> | Creates a **RelativeTimeFormat** object. | 
-| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: RelativeTimeFormatInputOptions)<sup>8+</sup> | Creates a **RelativeTimeFormat** object and sets the locale and other formatting-related attributes. | 
-| ohos.intl | format(value: number, unit: string): string<sup>8+</sup> | Calculates the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. | 
-| ohos.intl | formatToParts(value: number, unit: string): Array&lt;object&gt;<sup>8+</sup> | Returns each part of the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. | 
-| ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions<sup>8+</sup> | Obtains attributes of the **RelativeTimeFormat** object. | 
+| ohos.intl | constructor()<sup>8+</sup> | Creates a **RelativeTimeFormat** object. |
+| ohos.intl | constructor(locale: string \| Array&lt;string&gt;, options?: RelativeTimeFormatInputOptions)<sup>8+</sup> | Creates a **RelativeTimeFormat** object and sets the locale and other formatting-related attributes. |
+| ohos.intl | format(value: number, unit: string): string<sup>8+</sup> | Calculates the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. |
+| ohos.intl | formatToParts(value: number, unit: string): Array&lt;object&gt;<sup>8+</sup> | Returns each part of the relative time format based on the locale and other formatting-related attributes of the **RelativeTimeFormat** object. |
+| ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions<sup>8+</sup> | Obtains attributes of the **RelativeTimeFormat** object. |
 
 
 ### How to Develop
@@ -307,7 +307,7 @@ Use [RelativeTimeFormat](../reference/apis/js-apis-intl.md#relativetimeformat8)
    var relativeTimeFormat = new intl.RelativeTimeFormat();
    ```
 
-   Alternatively, use your own locale and formatting parameters to create a **RelativeTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md#relativetimeformatinputoptions8).
+   Alternatively, use your own locale and formatting parameters to create a **RelativeTimeFormat** object. Formatting parameters are optional. For a full list of formatting parameters, see [RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md#relativetimeformatinputoptions9).
    
    ```js
    var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"});

en/application-dev/napi/napi-guidelines.md

@@ -17,11 +17,11 @@ You can `import` the native .so that contains the JS processing logic. For examp
 
 ### .so Naming Rules
 
-Each module has a .so file. For example, if the module name is `hello`, name the .so file **libhello.so**. The `nm_modname` field in `napi_module` must be `hello`, which is the same as the module name. The sample code for importing the .so file is `import hello from 'libhello.so'`.
+Each module has a .so file. For example, if the module name is `hello`, name the .so file `libhello.so`. The `nm_modname` field in `napi_module` must be `hello`, which is the same as the module name. The sample code for importing the .so file is `import hello from 'libhello.so'`.
 
 ### JS Objects and Threads
 
-The Ark engine prevents NAPIs from being called to operate JS objects in non-JS threads. Otherwise, the application will crash.
+The Ark engine prevents NAPIs from being called to operate JS objects in non-JS threads. Otherwise, the application will crash. Observe the following rules:
 
 * The NAPIs can be used only in JS threads.
 * **env** is bound to a thread and cannot be used across threads. The JS object created by a NAPI can be used only in the thread, in which the object is created, that is, the JS object is bound to the **env** of the thread.
@@ -640,8 +640,3 @@ export default {
   }
 }
 ```
-## Samples
-The following samples are provided for native API development:
-- [`NativeAPI`: NativeAPI (eTS) (API8)](https://gitee.com/openharmony/app_samples/tree/master/Native/NativeAPI)
-- [First Native C++ Application (eTS) (API9)](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/NativeTemplateDemo)
-- [Native Component (eTS) (API9) ](https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/XComponent)

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

 # Development References
-
--   [Component Reference (TypeScript-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
--   [Component Reference (JavaScript-based Web-like Development Paradigm)](arkui-js/Readme-EN.md)
--   [API Reference (JS and TS APIs)](apis/Readme-EN.md)
--   API Reference (Native APIs)
-    -   [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
+- [SysCap List](syscap-list.md)
+- [Component Reference (ArkTS-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
+- [Component Reference (JavaScript-compatible Web-like Development Paradigm)](arkui-js/Readme-EN.md)
+- [API Reference (JS and TS APIs)](apis/Readme-EN.md)
+- API Reference (Native APIs)
+  -   [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
 

en/application-dev/reference/apis/Readme-EN.md

 # APIs
 
 - [API Reference Document Description](development-intro.md)
-
 - Ability Framework
-
   - FA Model
     - [@ohos.ability.featureAbility](js-apis-featureAbility.md)
     - [@ohos.ability.particleAbility](js-apis-particleAbility.md)
@@ -28,8 +26,6 @@
     - application/[FormExtensionContext](js-apis-formextensioncontext.md)
     - application/[PermissionRequestResult](js-apis-permissionrequestresult.md)
     - application/[ServiceExtensionContext](js-apis-service-extension-context.md)
-    - [InputMethodExtensionAbility](js-apis-inputmethod-extension-ability.md)
-    - [InputMethodExtensionContext](js-apis-inputmethod-extension-context.md)
   - FA and Stage Models
     - [@ohos.ability.dataUriUtils](js-apis-DataUriUtils.md)
     - [@ohos.ability.errorCode](js-apis-ability-errorCode.md)
@@ -60,18 +56,15 @@
     - application/[ExtensionRunningInfo](js-apis-extensionrunninginfo.md)
     - application/[MissionSnapshot](js-apis-application-MissionSnapshot.md)
     - application/[ProcessRunningInfo](js-apis-processrunninginfo.md)
+    - application/[ProcessRunningInformation](js-apis-processrunninginformation.md)
     - application/[shellCmdResult](js-apis-application-shellCmdResult.md)
     - continuation/[ContinuationResult](js-apis-continuation-continuationResult.md)
 - Common Event and Notification
-
   - [@ohos.commonEvent](js-apis-commonEvent.md)
   - [@ohos.events.emitter](js-apis-emitter.md)
   - [@ohos.notification](js-apis-notification.md)
-  - [@ohos.reminderAgent](js-apis-reminderAgent.md)
   - application/[EventHub](js-apis-eventhub.md)
-  
-- Bundle Management
-
+ - Bundle Management 
   - [@ohos.bundle](js-apis-Bundle.md)
   - [@ohos.bundle.defaultAppManager](js-apis-bundle-defaultAppManager.md)
   - [@ohos.bundle.innerBundleManager)](js-apis-Bundle-InnerBundleManager.md)
@@ -92,17 +85,13 @@
   - bundle/[ModuleInfo](js-apis-bundle-ModuleInfo.md)
   - bundle/[PermissionDef](js-apis-bundle-PermissionDef.md)
   - bundle/[RemoteAbilityInfo](js-apis-bundle-remoteAbilityInfo.md)
-  - bundle/[ShortcutInfo](js-apis-bundle-ShortcutInfo.md)
+  - bundle/[ShortcutInfo<sup>(deprecated)</sup>](js-apis-bundle-ShortcutInfo.md)
 - UI Page
-
   - [@ohos.animator](js-apis-animator.md)
   - [@ohos.mediaquery](js-apis-mediaquery.md)
-  - [@ohos.prompt](js-apis-prompt.md)
   - [@ohos.router](js-apis-router.md)
   - [@ohos.uiAppearance](js-apis-uiappearance.md)
-  
-- Graphics
-
+ - Graphics 
   - [@ohos.animation.windowAnimationManager](js-apis-windowAnimationManager.md)
   - [@ohos.display ](js-apis-display.md)
   - [@ohos.effectKit](js-apis-effectKit.md)
@@ -111,42 +100,31 @@
   - [@ohos.window](js-apis-window.md)
   - [webgl](js-apis-webgl.md)
   - [webgl2](js-apis-webgl2.md)
-  
 - Media
-
   - [@ohos.multimedia.audio](js-apis-audio.md)
   - [@ohos.multimedia.camera](js-apis-camera.md)
   - [@ohos.multimedia.image](js-apis-image.md)
   - [@ohos.multimedia.media](js-apis-media.md)
-  - [@ohos.multimedia.medialibrary](js-apis-medialibrary.md)
-  
 - Resource Management
-
   - [@ohos.i18n](js-apis-i18n.md)
   - [@ohos.intl](js-apis-intl.md)
   - [@ohos.resourceManager](js-apis-resource-manager.md)
-  
-- Resource Scheduling
-
+- Resource Scheduling  
   - [@ohos.backgroundTaskManager](js-apis-backgroundTaskManager.md)
   - [@ohos.distributedMissionManager](js-apis-distributedMissionManager.md)
   - [@ohos.workScheduler ](js-apis-workScheduler.md)
   - [@ohos.WorkSchedulerExtensionAbility](js-apis-WorkSchedulerExtensionAbility.md)
-  
 - Custom Management
-
   - [@ohos.configPolicy](js-apis-config-policy.md)
-  - [@ohos.enterpriseDeviceManager](js-apis-enterprise-device-manager.md)
   - [@ohos.EnterpriseAdminExtensionAbility](js-apis-EnterpriseAdminExtensionAbility.md)
+  - [@ohos.enterpriseDeviceManager](js-apis-enterprise-device-manager.md)
   - enterpriseDeviceManager/[DeviceSettingsManager](js-apis-enterpriseDeviceManager-DeviceSettingsManager.md)
-  
 - Security
-
   - [@ohos.abilityAccessCtrl](js-apis-abilityAccessCtrl.md)
   - [@ohos.privacyManager](js-apis-privacyManager.md)
   - [@ohos.security.huks ](js-apis-huks.md)
-  - [@ohos.userIAM.userAuth ](js-apis-useriam-userauth.md)
   - [@ohos.userIAM.faceAuth](js-apis-useriam-faceauth.md)
+  - [@ohos.userIAM.userAuth ](js-apis-useriam-userauth.md)
   - [@system.cipher](js-apis-system-cipher.md)
   
 - Data Management
@@ -167,46 +145,40 @@
   - [@ohos.document](js-apis-document.md)
   - [@ohos.environment](js-apis-environment.md)
   - [@ohos.fileio](js-apis-fileio.md)
-  - [@ohos.fileManager](js-apis-filemanager.md)
+  - [@ohos.multimedia.medialibrary](js-apis-medialibrary.md)
+  - [@ohos.securityLabel](js-apis-securityLabel.md)
   - [@ohos.statfs](js-apis-statfs.md)
   - [@ohos.storageStatistics](js-apis-storage-statistics.md)
   - [@ohos.volumeManager](js-apis-volumemanager.md)
-  - [@ohos.securityLabel](js-apis-securityLabel.md)
-  
 - Telephony Service
-
   - [@ohos.contact](js-apis-contact.md)
   - [@ohos.telephony.call](js-apis-call.md)
+  - [@ohos.telephony.data](js-apis-telephony-data.md)
   - [@ohos.telephony.observer](js-apis-observer.md)
   - [@ohos.telephony.radio](js-apis-radio.md)
   - [@ohos.telephony.sim](js-apis-sim.md)
   - [@ohos.telephony.sms](js-apis-sms.md)
-  - [@ohos.telephony.data](js-apis-telephony-data.md)
-  
 - Network Management
-
   - [@ohos.net.connection](js-apis-net-connection.md)
   - [@ohos.net.http](js-apis-http.md)
-  - [@ohos.request](js-apis-request.md)
   - [@ohos.net.socket](js-apis-socket.md)
+
   - [@ohos.net.webSocket](js-apis-webSocket.md)
-  
+  - [@ohos.request](js-apis-request.md)
 - Connectivity
-
   - [@ohos.bluetooth](js-apis-bluetooth.md)
   - [@ohos.connectedTag](js-apis-connectedTag.md)
   - [@ohos.nfc.cardEmulation](js-apis-cardEmulation.md)
   - [@ohos.nfc.controller](js-apis-nfcController.md)
   - [@ohos.nfc.tag](js-apis-nfcTag.md)
-  - [@ohos.nfc.tag](js-apis-nfctech.md)
-  - [@ohos.nfc.tag](js-apis-tagSession.md)
   - [@ohos.rpc](js-apis-rpc.md)
   - [@ohos.wifi](js-apis-wifi.md)
   - [@ohos.wifiext](js-apis-wifiext.md)
-  
+  - [@ohos.nfc.tag](js-apis-nfctech.md)
+  - [@ohos.nfc.tag](js-apis-tagSession.md) 
 - Basic Features
-
   - [@ohos.accessibility](js-apis-accessibility.md)
+  - [@ohos.accessibility.config](js-apis-accessibility-config.md)
   - [@ohos.faultLogger](js-apis-faultLogger.md)
   - [@ohos.hiAppEvent](js-apis-hiappevent.md)
   - [@ohos.hichecker](js-apis-hichecker.md)
@@ -217,13 +189,15 @@
   - [@ohos.hiTraceMeter](js-apis-hitracemeter.md)
   - [@ohos.inputMethod](js-apis-inputmethod.md)
   - [@ohos.inputMethodEngine](js-apis-inputmethodengine.md)
+  - [@ohos.inputmethodextensionability](js-apis-inputmethod-extension-ability.md)
+  - [@ohos.inputmethodextensioncontext](js-apis-inputmethod-extension-context.md)
   - [@ohos.pasteboard](js-apis-pasteboard.md)
   - [@ohos.screenLock](js-apis-screen-lock.md)
   - [@ohos.systemTime](js-apis-system-time.md)
   - [@ohos.systemTimer](js-apis-system-timer.md)
   - [@ohos.wallpaper](js-apis-wallpaper.md)
   - [Timer](js-apis-timer.md)
-  
+
 - Device Management
 
   - [@ohos.batteryInfo ](js-apis-battery-info.md)
@@ -239,6 +213,7 @@
   - [@ohos.multimodalInput.keyCode](js-apis-keycode.md)
   - [@ohos.multimodalInput.keyEvent](js-apis-keyevent.md)
   - [@ohos.multimodalInput.mouseEvent](js-apis-mouseevent.md)
+  - [@ohos.multimodalInput.pointer](js-apis-pointer.md)
   - [@ohos.multimodalInput.touchEvent](js-apis-touchevent.md)
   - [@ohos.power](js-apis-power.md)
   - [@ohos.runningLock](js-apis-runninglock.md)
@@ -249,15 +224,12 @@
   - [@ohos.update](js-apis-update.md)
   - [@ohos.usb](js-apis-usb.md)
   - [@ohos.vibrator](js-apis-vibrator.md)
-  
-- Account Management
-
+- Account Management  
   - [@ohos.account.appAccount](js-apis-appAccount.md)
   - [@ohos.account.distributedAccount](js-apis-distributed-account.md)
   - [@ohos.account.osAccount](js-apis-osAccount.md)
-  
-- Language Base Class Library
-
+ - Language Base Class Library 
+  - [@ohos.buffer](js-apis-buffer.md)
   - [@ohos.convertxml](js-apis-convertxml.md)
   - [@ohos.process](js-apis-process.md)
   - [@ohos.uri](js-apis-uri.md)
@@ -279,16 +251,14 @@
   - [@ohos.util.Vector](js-apis-vector.md)
   - [@ohos.worker](js-apis-worker.md)
   - [@ohos.xml](js-apis-xml.md)
-  
 - Test
-
   - [@ohos.application.testRunner](js-apis-testRunner.md)
   - [@ohos.uitest](js-apis-uitest.md)
-  
-- APIs No Longer Maintained
-
+- APIs No Longer Maintained 
   - [@ohos.bytrace](js-apis-bytrace.md)
   - [@ohos.data.storage](js-apis-data-storage.md)
+  - [@ohos.prompt](js-apis-prompt.md)
+  - [@ohos.reminderAgent](js-apis-reminderAgent.md)
   - [@system.app](js-apis-system-app.md)
   - [@system.battery](js-apis-system-battery.md)
   - [@system.bluetooth](js-apis-system-bluetooth.md)

en/application-dev/reference/apis/js-apis-application-StartOptions.md

@@ -19,5 +19,5 @@ import StartOptions from '@ohos.application.StartOptions';
 
 | Name| Readable| Writable| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- | -------- | -------- |
-| [windowMode](js-apis-application-abilityConstant.md#AbilityConstant.WindowMode) | Yes| No| number | No| Window mode.|
+| [windowMode](js-apis-application-abilityConstant.md#abilityconstantwindowmode) | Yes| No| number | No| Window mode.|
 | displayId | Yes| No| number | No| Display ID.|

en/application-dev/reference/apis/js-apis-battery-info.md

 # Battery Info
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
+>**NOTE**
+>
 >The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 The Battery Info module provides APIs for querying the charger type, battery health status, and battery charging status.
@@ -25,7 +26,7 @@ Describes battery information.
 | batterySOC                    | number                                    | Yes      | No       | Battery state of charge (SoC) of the current device, in unit of percentage. |
 | chargingStatus                | [BatteryChargeState](#batterychargestate) | Yes      | No       | Battery charging state of the current device.                |
 | healthStatus                  | [BatteryHealthState](#batteryhealthstate) | Yes      | No       | Battery health state of the current device.                  |
-| pluggedType                   | [BatteryPluggedType](#batterypluggertype) | Yes      | No       | Charger type of the current device.                          |
+| pluggedType                   | [BatteryPluggedType](#batterypluggedtype) | Yes      | No       | Charger type of the current device.                          |
 | voltage                       | number                                    | Yes      | No       | Battery voltage of the current device, in unit of microvolt. |
 | technology                    | string                                    | Yes      | No       | Battery technology of the current device.                    |
 | batteryTemperature            | number                                    | Yes      | No       | Battery temperature of the current device, in unit of 0.1°C. |
@@ -43,12 +44,12 @@ var batterySoc = batteryInfo.batterySOC;
 
 Enumerates charger types.
 
-| Name     | Default Value | Description      |
-| -------- | ------------- | ---------------- |
-| NONE     | 0             | Unknown type     |
-| AC       | 1             | AC charger       |
-| USB      | 2             | USB charger      |
-| WIRELESS | 3             | Wireless charger |
+| Name     | Default Value | Description       |
+| -------- | ------------- | ----------------- |
+| NONE     | 0             | Unknown type.     |
+| AC       | 1             | AC charger.       |
+| USB      | 2             | USB charger.      |
+| WIRELESS | 3             | Wireless charger. |
 
 
 ## BatteryChargeState

en/application-dev/reference/apis/js-apis-filemanager.md

-# User File Access and Management
-
-The **fileManager** module provides APIs for accessing and managing user files. It interworks with the underlying file management services to implement media library and external card management, and provides capabilities for applications to query and create user files.
-
->**NOTE**<br/>
->
->- The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
->- The APIs of this module are system APIs and cannot be called by third-party applications. Currently, these APIs can be called only by **filepicker**.
-
-## Modules to Import
-
-```js
-import filemanager from '@ohos.fileManager';
-```
-
-## filemanager.getRoot
-
-getRoot(options? : {dev? : DevInfo}) : Promise&lt;FileInfo[]&gt;
-
-Obtains information about the root album or directory in asynchronous mode. This API uses a promise to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name| Type| Mandatory| Description|
-| --- | --- | --- | -- |
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.|
-
-**Return value**
-
-| Type| Description|
-| --- | -- |
-| Promise&lt;[FileInfo](#fileinfo)[]&gt; | Promise used to return the root album or directory information obtained.|
-
-**Example**
-
-  ```js
-  filemanager.getRoot().then((fileInfos) => {
-    for (var i = 0; i < fileInfos.length; i++) {
-        console.log("files:"+JSON.stringify(fileInfos));
-    }
-  }).catch((err) => {
-      console.log(err)
-  });
-  ```
-
-## filemanager.getRoot
-
-getRoot(options? : {dev? : DevInfo}, callback : AsyncCallback&lt;FileInfo[]&gt;) : void
-
-Obtains information about the root album or directory in asynchronous mode. This API uses a callback to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name  | Type                     | Mandatory| Description                         |
-| -------- | ------------------------- | ---- | ----------------------------- |
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.|
-| callback | AsyncCallback&lt;[FileInfo](#fileinfo)[]&gt; | Yes  | Callback invoked to return the root album or directory information obtained. |
-
-**Example**
-
-  ```js
-  let options = {
-    "dev":{
-      "name":"local"
-    }
-  };
-  filemanager.getRoot(options, (err, fileInfos)=>{
-    for (var i = 0; i < fileInfos.length; i++) {
-        console.log("files:"+JSON.stringify(fileInfos));
-    }
-  });
-  ```
-
-## filemanager.listFile
-
-listFile(path : string, type : string, options? : {dev? : DevInfo, offset? : number, count? : number}) : Promise&lt;FileInfo[]&gt;
-
-Obtains information about the second-level album or files in asynchronous mode. This API uses a promise to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name| Type| Mandatory| Description|
-| --- | --- | --- | -- |
-| path | string | Yes| URI of the directory to query.|
-| type | string | Yes| Type of the files to query. The file type can be **file**, **image**, **audio**, or **video**.|
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.<br>- &nbsp;**offset**: position to start the query. The value is a number.<br>- &nbsp;**count**: number of files to query.|
-
-**Return value**
-
-| Type| Description|
-| --- | -- |
-| Promise&lt;FileInfo[]&gt; | Promise used to return the album or file information obtained.|
-
-**Error**
-
-| Error Info| Error Code|Description|
-| -- | --- | -- |
-| No such file or directory | 2      | The directory or album of the specified URI does not exist.|
-| No such process | 3 | Failed to obtain the FMS service.|
-| Not a directory | 20 | The object specified by the URI is not a directory or album.|
-
-**Example**
-
-  ```js
-  // Obtain all files in the directory. You can use getRoot to obtain the directory URI.
-  filemanager.getRoot().then((fileInfos) => {
-    let file = fileInfos.find(item => item.name == "file_folder");
-    let path = file.path;
-    filemanager.listFile(path, "file").then((files) => {
-        console.log("files:" + JSON.stringify(files));
-      }).catch((err) => {
-        console.log("failed to get files" + err);
-      });
-  }).catch((err) => {
-      console.log("failed to get root" + err);
-  });
-  ```
-
-## filemanager.listFile
-
-listFile(path : string, type : string, options? : {dev? : DevInfo, offset? : number, count? : number}, callback : AsyncCallback&lt;FileInfo[]&gt;) : void
-
-Obtains information about the second-level album or files in asynchronous mode. This API uses a callback to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name  | Type                     | Mandatory| Description                                                        |
-| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
-| path     | string                    | Yes  | URI of the directory to query.                                               |
-| type     | string                    | Yes  | Type of the files to query. The file type can be **file**, **image**, **audio**, or **video**.|
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.<br>- &nbsp;**offset**: position to start the query. The value is a number.<br>- &nbsp;**count**: number of files to query.|
-| callback | AsyncCallback&lt;[FileInfo](#fileinfo)[]&gt; | Yes  | Callback invoked to return the root album or directory information obtained.                                |
-
-**Error**
-
-| Error Info                 | Error Code| Description                     |
-| ------------------------- | ------ | ------------------------- |
-| No such file or directory | 2      | The directory or album of the specified URI does not exist.|
-| No such process           | 3      | Failed to obtain the FMS service.          |
-| Not a directory           | 20     | The object specified by the URI is not a directory or album.|
-
-**Example**
-
-```js
-// Obtain all files in the directory. You can use getRoot to obtain the directory URI.
-filemanager.getRoot().then((fileInfos) => {
-  let file = fileInfos.find(item => item.name == "image_album");
-  let path = file.path;
-  filemanager.listFile(path, "image",function(err, files){
-    console.log("files:" + JSON.stringify(files));
-  })
-}).catch((err) => {
-    console.log("failed to get root" + err);
-});
-```
-
-## filemanager.createFile
-
-createFile(path : string, filename : string, options? : {dev? : DevInfo})  :   Promise&lt;string&gt;
-
-Creates a file in the specified path in asynchronous mode. This API uses a promise to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name| Type| Mandatory| Description|
-| --- | --- | --- | -- |
-| filename | string | Yes| Name of the file to create.|
-| path | string | Yes| URI of the file to create.|
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.|
-
-**Return value**
-
-| Type| Description|
-| --- | -- |
-| Promise&lt;string&gt; | Promise used to return the URI of the file created.|
-
-**Error**
-
-| Error Info| Error Code|Description|
-| -- | --- | -- |
-| Operation not permitted | 1 | A file with the same name already exists.|
-| No such file or directory | 2 | The directory or album of the specified URI does not exist.|
-| No such process | 3 | Failed to obtain the FMS service.|
-| Not a directory | 20 | The object specified by the URI is not a directory or album.|
-
-**Example**
-
-  ```js
-  // Create a file.
-  let media_path = "" // Obtain the file URI using listFile() and getRoot().
-  let name = "xxx.jpg" // File to be saved.
-  filemanager.createFile(media_path, name).then((uri) => {
-      // The URI of the file created is returned.
-      console.log("file uri:"+uri);
-  }).catch((err) => {
-      console.log(err);
-  });
-  ```
-
-## filemanager.createFile
-
-createFile(path : string, filename: string, options? : {dev? : DevInfo}, callback : AsyncCallback&lt;string&gt;) : void
-
-Creates a file in the specified path in asynchronous mode. This API uses a callback to return the result.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-**Parameters**
-
-| Name  | Type                     | Mandatory| Description                         |
-| -------- | ------------------------- | ---- | ----------------------------- |
-| filename | string                    | Yes  | Name of the file to create.               |
-| path     | string                    | Yes  | URI of the file to create.            |
-| options | Object | No| The options are as follows:<br>- &nbsp;**dev**: See [DevInfo](#devinfo). It is **dev = {name: "local"}** by default if not specified. Currently, only 'local' is supported.|
-| callback | AsyncCallback&lt;[FileInfo](#fileinfo)[]&gt; | Yes  | Callback invoked to return the root album or directory information obtained. |
-
-**Error**
-
-| Error Info                 | Error Code| Description                     |
-| ------------------------- | ------ | ------------------------- |
-| Operation not permitted   | 1      | A file with the same name already exists.             |
-| No such file or directory | 2      | The directory or album of the specified URI does not exist.|
-| No such process           | 3      | Failed to obtain the FMS service.          |
-| Not a directory           | 20     | The object specified by the URI is not a directory or album.|
-
-**Example**
-
-  ```js
-  // Create a file.
-  // Call listFile() and getRoot() to obtain the file URI.
-  let media_path = ""
-  // File to be saved.
-  let name = "xxx.jpg"
-  let options = {
-    "dev":{
-      "name":"local"
-    }
-  };
-  filemanager.createFile(media_path, name, options, function(err, uri) {
-    // The URI of the file created is returned.
-    console.log("file uri:"+uri);
-  });
-
-  ```
-
-## FileInfo
-Defines the file information returned by **getRoot()** or **listFile()**.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-### Attributes
-
-| Name| Type| Readable| Writable| Description|
-| --- | -- | -- | -- | -- |
-| name | string | Yes| No| File name.|
-| path | string | Yes| No| URI of the file.|
-| type | string | Yes| No| File type.|
-| size | number | Yes| No| File size.|
-| addedTime | number | Yes| No| Time when the file was scanned to the database.|
-| modifiedTime | number | Yes| No| Time when the file was modified.|
-
-## DevInfo
-
-Defines the device type.
-
-**System capability**: SystemCapability.FileManagement.UserFileService
-
-### Attributes
-
-| Name| Type  | Readable| Writable| Description    |
-| ------ | ------ | ---- | ---- | -------- |
-| name   | string | Yes  | Yes  | Device name.|

en/application-dev/reference/apis/js-apis-intl.md

@@ -500,6 +500,7 @@ Returns properties reflecting the locale and collation options of a **Collator**
 | [CollatorOptions](#collatoroptions) | Properties of the **Collator** object.|
 
 **Example**
+
   ```
   var collator = new Intl.Collator("zh-Hans");
   var options = collator.resolvedOptions();

en/application-dev/reference/apis/js-apis-storage-statistics.md

@@ -29,15 +29,15 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type  | Mandatory| Description|
-  | ---------- | ------ | ---- | ---- |
-  | volumeUuid | string | Yes  | UUID of the volume.|
+| Name    | Type  | Mandatory| Description|
+| ---------- | ------ | ---- | ---- |
+| volumeUuid | string | Yes  | UUID of the volume.|
 
 **Return value**
 
-  | Type                 | Description            |
-  | --------------------- | ---------------- |
-  | Promise<number> | Promise used to return the total size of the volume.|
+| Type                 | Description            |
+| --------------------- | ---------------- |
+| Promise<number> | Promise used to return the total size of the volume.|
 
 **Example**
 
@@ -66,10 +66,10 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type                                | Mandatory| Description                      |
-  | ---------- | ------------------------------------ | ---- | -------------------------- |
-  | volumeUuid | string                               | Yes  | UUID of the volume.                      |
-  | callback   | callback:AsyncCallback<number> | Yes  | Callback invoked to return the total size of the volume.|
+| Name    | Type                                | Mandatory| Description                      |
+| ---------- | ------------------------------------ | ---- | -------------------------- |
+| volumeUuid | string                               | Yes  | UUID of the volume.                      |
+| callback   | callback:AsyncCallback<number> | Yes  | Callback invoked to return the total size of the volume.|
 
 **Example**
 
@@ -97,15 +97,15 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type  | Mandatory| Description|
-  | ---------- | ------ | ---- | ---- |
-  | volumeUuid | string | Yes  | UUID of the volume.|
+| Name    | Type  | Mandatory| Description|
+| ---------- | ------ | ---- | ---- |
+| volumeUuid | string | Yes  | UUID of the volume.|
 
 **Return value**
 
-  | Type                 | Description              |
-  | --------------------- | ------------------ |
-  | Promise<number> | Promise used to return the available space of the volume.|
+| Type                 | Description              |
+| --------------------- | ------------------ |
+| Promise<number> | Promise used to return the available space of the volume.|
 
 **Example**
 
@@ -135,10 +135,10 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type                                | Mandatory| Description                        |
-  | ---------- | ------------------------------------ | ---- | ---------------------------- |
-  | volumeUuid | string                               | Yes  | UUID of the volume.                        |
-  | callback   | callback:AsyncCallback<number> | Yes  | Callback invoked to return the available space of the volume.|
+| Name    | Type                                | Mandatory| Description                        |
+| ---------- | ------------------------------------ | ---- | ---------------------------- |
+| volumeUuid | string                               | Yes  | UUID of the volume.                        |
+| callback   | callback:AsyncCallback<number> | Yes  | Callback invoked to return the available space of the volume.|
 
 **Example**
 
@@ -166,15 +166,15 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name     | Type  | Mandatory| Description    |
-  | ----------- | ------ | ---- | -------- |
-  | packageName | string | Yes  | Bundle name of the application.|
+| Name     | Type  | Mandatory| Description    |
+| ----------- | ------ | ---- | -------- |
+| packageName | string | Yes  | Bundle name of the application.|
 
 **Return value**
 
-  | Type                                      | Description                      |
-  | ------------------------------------------ | -------------------------- |
-  | Promise<[Bundlestats](#bundlestats)> | Promise used to return the space information obtained.|
+| Type                                      | Description                      |
+| ------------------------------------------ | -------------------------- |
+| Promise<[Bundlestats](#bundlestats)> | Promise used to return the space information obtained.|
 
 **Example**
 
@@ -203,10 +203,10 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name  | Type                                                     | Mandatory| Description                                |
-  | -------- | --------------------------------------------------------- | ---- | ------------------------------------ |
-  | packageName | string | Yes  | Bundle name of the application.|
-  | callback | callback:AsyncCallback<[Bundlestats](#bundlestats)> | Yes  | Callback invoked to return the space information obtained.|
+| Name  | Type                                                     | Mandatory| Description                                |
+| -------- | --------------------------------------------------------- | ---- | ------------------------------------ |
+| packageName | string | Yes  | Bundle name of the application.|
+| callback | callback:AsyncCallback<[Bundlestats](#bundlestats)> | Yes  | Callback invoked to return the space information obtained.|
 
 **Example**
 
@@ -228,9 +228,9 @@ Asynchronously obtains space information of the current third-party application.
 
 **Return value**
 
-  | Type                                       | Description                      |
-  | ------------------------------------------ | -------------------------- |
-  | Promise<[Bundlestats](#bundlestats)> | Promise used to return the space information obtained.     |
+| Type                                       | Description                      |
+| ------------------------------------------ | -------------------------- |
+| Promise<[Bundlestats](#bundlestats)> | Promise used to return the space information obtained.     |
 
 **Example**
 
@@ -249,9 +249,9 @@ Asynchronously obtains space information of the current third-party application.
 
 **Parameters**
 
-  | Name   | Type                                                      | Mandatory | Description                                |
-  | -------- | --------------------------------------------------------- | ---- | ------------------------------------ |
-  | callback | callback:AsyncCallback<[BundleStats](#bundlestats)> | Yes  | Callback invoked to return the space information obtained.       |
+| Name   | Type                                                      | Mandatory | Description                                |
+| -------- | --------------------------------------------------------- | ---- | ------------------------------------ |
+| callback | callback:AsyncCallback<[BundleStats](#bundlestats)> | Yes  | Callback invoked to return the space information obtained.       |
 
 **Example**
 
@@ -294,9 +294,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Return value**
 
-  | Type                  | Description              |
-  | --------------------- | ------------------ |
-  | Promise<number> | Promise used to return the total space of the built-in memory card.  |
+| Type                  | Description              |
+| --------------------- | ------------------ |
+| Promise<number> | Promise used to return the total space of the built-in memory card.  |
 
 **Example**
 
@@ -321,9 +321,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name   | Type                                 | Mandatory | Description                    |
-  | -------- | ------------------------------------ | ---- | ------------------------ |
-  | callback | callback:AsyncCallback<number> | Yes  | Callback invoked to return the total space of the built-in memory card.|
+| Name   | Type                                 | Mandatory | Description                    |
+| -------- | ------------------------------------ | ---- | ------------------------ |
+| callback | callback:AsyncCallback<number> | Yes  | Callback invoked to return the total space of the built-in memory card.|
 
 **Example**
 
@@ -351,9 +351,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Return value**
 
-  | Type                  | Description              |
-  | --------------------- | ------------------ |
-  | Promise<number> | Promise used to return the available space of the built-in memory card.|
+| Type                  | Description              |
+| --------------------- | ------------------ |
+| Promise<number> | Promise used to return the available space of the built-in memory card.|
 
 **Example**
 
@@ -379,9 +379,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name   | Type                                 | Mandatory| Description                      |
-  | -------- | ------------------------------------ | ---- | ------------------------- |
-  | callback | callback:AsyncCallback<number> | Yes  | Callback invoked to return the available space of the built-in memory card.|
+| Name   | Type                                 | Mandatory| Description                      |
+| -------- | ------------------------------------ | ---- | ------------------------- |
+| callback | callback:AsyncCallback<number> | Yes  | Callback invoked to return the available space of the built-in memory card.|
 
 **Example**
 
@@ -408,9 +408,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Return value**
 
-  | Type                 | Description            |
-  | --------------------- | ---------------- |
-  | Promise<number> | Promise used to return the system space obtained.|
+| Type                 | Description            |
+| --------------------- | ---------------- |
+| Promise<number> | Promise used to return the system space obtained.|
 
 **Example**
 
@@ -438,9 +438,9 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type                                | Mandatory| Description                      |
-  | ---------- | ------------------------------------ | ---- | -------------------------- |
-  | callback   | callback:AsyncCallback<number> | Yes  | Callback used to return the system space obtained.|
+| Name    | Type                                | Mandatory| Description                      |
+| ---------- | ------------------------------------ | ---- | -------------------------- |
+| callback   | callback:AsyncCallback<number> | Yes  | Callback used to return the system space obtained.|
 
 **Example**
 
@@ -467,15 +467,15 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type  | Mandatory| Description|
-  | ---------- | ------ | ---- | ---- |
-  | userId | number | No  | User ID.<br>Value:<br>-&nbsp; Set this parameter to the ID of the user to be queried.<br>-&nbsp; If no value is specified, information about the current user is queried.|
+| Name    | Type  | Mandatory| Description|
+| ---------- | ------ | ---- | ---- |
+| userId | number | No  | User ID.<br>Value:<br>-&nbsp; Set this parameter to the ID of the user to be queried.<br>-&nbsp; If no value is specified, information about the current user is queried.|
 
 **Return value**
 
-  | Type                 | Description            |
-  | --------------------- | ---------------- |
-  | Promise&lt;[StorageStats](#StorageStats)&gt; | Promise used to return the information obtained.|
+| Type                 | Description            |
+| --------------------- | ---------------- |
+| Promise&lt;[StorageStats](#storagestats9)&gt; | Promise used to return the information obtained.|
 
 **Example**
 
@@ -504,10 +504,10 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-  | Name    | Type                                | Mandatory| Description                      |
-  | ---------- | ------------------------------------ | ---- | -------------------------- |
-  | userId | number                               | No  | User ID.<br>Value:<br>-&nbsp; Set this parameter to the ID of the user to be queried.<br>-&nbsp; If no value is specified, information about the current user is queried.                      |
-  | callback   | callback:AsyncCallback&lt;[StorageStats](#StorageStats)&gt; | Yes  | Callback invoked to return the information obtained.|
+| Name    | Type                                | Mandatory| Description                      |
+| ---------- | ------------------------------------ | ---- | -------------------------- |
+| userId | number                               | No  | User ID.<br>Value:<br>-&nbsp; Set this parameter to the ID of the user to be queried.<br>-&nbsp; If no value is specified, information about the current user is queried.                      |
+| callback   | callback:AsyncCallback&lt;[StorageStats](#storagestats9)&gt; | Yes  | Callback invoked to return the information obtained.|
 
 **Example**
 

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

-#  JavaScript-based Web-like Development Paradigm
+#  JavaScript-compatible Web-like Development Paradigm
 
 -   Universal Component Information
     - [Universal Attributes](js-components-common-attributes.md)

en/application-dev/reference/arkui-js/js-components-basic-picker.md

@@ -172,7 +172,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
         </option>
   </select>
   <picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
-    oncancel="textoncancel" class="pickertext"  "></picker>
+    oncancel="textoncancel" class="pickertext"></picker>
 
   <picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
     onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>

en/application-dev/reference/arkui-js/js-components-svg-animate.md

-# animate<a name="EN-US_TOPIC_0000001127125042"></a>
+# animate
 
 The  **<animate\>**  component is used to apply animation to an  **<svg\>**  component.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
+>![](../../public_sys-resources/icon-note.gif) **NOTE**
+>
 >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section11257113618419"></a>
+## Required Permissions
 
 None
 
-## Child Components<a name="section9288143101012"></a>
+## Child Components
 
 Not supported
 
-## Attributes<a name="section2907183951110"></a>
+## Attributes
 
 <a name="table20633101642315"></a>
 <table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aaf1247770b244944bbcc9f28d9a6f00b"><a name="aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="aaf1247770b244944bbcc9f28d9a6f00b"></a>Name</p>
@@ -193,7 +194,7 @@ Not supported
 </tbody>
 </table>
 
-## Example<a name="section360556124815"></a>
+## Example
 
 ```
 <!-- xxx.hml -->

en/application-dev/reference/arkui-js/js-components-svg-animatetransform.md

-# animateTransform<a name="EN-US_TOPIC_0000001173324667"></a>
+# animateTransform
 
 The  **<animateTransform\>**  component is used to apply a transform animation and supports the following components:
 
 <circle\>, <ellipse\>, <line\>, <path\>, <polygon\>, <polyline\>, <rect\>, <text\>
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
+>**NOTE**
+>
 >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Required Permissions<a name="section11257113618419"></a>
+## Required Permissions
 
 None
 
-## Child Components<a name="section9288143101012"></a>
+## Child Components
 
 Not supported
 
-## Attributes<a name="section2907183951110"></a>
+## Attributes
 
 The  **animate**  attributes and the attributes in the following table are supported.
 
@@ -46,7 +47,7 @@ The  **animate**  attributes and the attributes in the following table are suppo
 </tbody>
 </table>
 
-## Example<a name="section360556124815"></a>
+## Example
 
 ```
 <!-- xxx.hml -->

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

-# TypeScript-based Declarative Development Paradigm
+# ArkTS-based Declarative Development Paradigm
 
 - Universal Component Information
     - Universal Events
@@ -133,12 +133,13 @@
 - Canvas Components
     - [Canvas](ts-components-canvas-canvas.md)
     - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
-    - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
-    - [Lottie](ts-components-canvas-lottie.md)
-    - [Path2D](ts-components-canvas-path2d.md)
     - [CanvasGradient](ts-components-canvas-canvasgradient.md)
     - [ImageBitmap](ts-components-canvas-imagebitmap.md)
     - [ImageData](ts-components-canvas-imagedata.md)
+    - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
+    - [Path2D](ts-components-canvas-path2d.md)
+    - [Lottie](ts-components-canvas-lottie.md)
+
 - Animation
     - [AnimatorProperty](ts-animatorproperty.md)
     - [Explicit Animation](ts-explicit-animation.md)
@@ -147,8 +148,7 @@
         - [Component Transition](ts-transition-animation-component.md)
         - [Transition of Shared Elements](ts-transition-animation-shared-elements.md)
     - [Motion Path Animation](ts-motion-path-animation.md)
-    - [Matrix Transformation](ts-matrix-transformation.md)
-    - [Interpolation Calculation](ts-interpolation-calculation.md)
+
 - Global UI Methods
     - Pop-up Window
         - [Alert Dialog Box](ts-methods-alert-dialog-box.md)
@@ -159,3 +159,4 @@
         - [Text Picker Dialog Box](ts-methods-textpicker-dialog.md)
     - [Menu](ts-methods-menu.md)
 - [Built-in Enums](ts-appendix-enums.md)
+- [Types](ts-types.md)

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

@@ -6,6 +6,8 @@ Use **RenderingContext** to draw rectangles, text, images, and other objects on
 >
 > 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
 
 CanvasRenderingContext2D(setting: RenderingContextSetting)
@@ -721,6 +723,7 @@ Draws an outlined rectangle on the canvas.
   struct StrokeRect {
     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)
@@ -764,16 +767,17 @@ Clears the content in a rectangle on the canvas.
   struct ClearRect {
     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')
+          .backgroundColor('#ffffff')
           .onReady(() =>{
             this.context.fillStyle = 'rgb(0,0,255)'
-            this.context.fillRect(0,0,500,500)
-            this.context.clearRect(20,20,150,100)
+            this.context.fillRect(20,20,200,200)
+            this.context.clearRect(30,30,150,100)
         })
       }
       .width('100%')
@@ -809,6 +813,7 @@ Draws filled text on the canvas.
   struct FillText {
     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)
@@ -853,6 +858,7 @@ Draws a text stroke on the canvas.
   struct StrokeText {
     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)
@@ -921,6 +927,7 @@ Measures the specified text to obtain its width. This API returns a **TextMetric
   struct MeasureText {
     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)
@@ -973,6 +980,8 @@ Strokes a path.
           .onReady(() =>{
             this.context.moveTo(25, 25)
             this.context.lineTo(25, 105)
+            this.context.lineTo(75, 105)
+            this.context.lineTo(75, 25)
             this.context.strokeStyle = 'rgb(0,0,255)'
             this.context.stroke()
           })
@@ -1435,7 +1444,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.beginPath()
-            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
             this.context.stroke()
           })
       }
@@ -1503,7 +1512,7 @@ Fills the area inside a closed path on the canvas.
 
 | Name      | Type            | Mandatory  | Default Value      | Description                                      |
 | -------- | -------------- | ---- | --------- | ---------------------------------------- |
-| fillRule | CanvasFillRule | No   | "nonzero" | Specifies the rule to populate the object.<br>The options are **"nonzero"** and **"evenodd"**.|
+| 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"**.|
 
 
 **Example**  
@@ -1616,11 +1625,11 @@ Sets the current path to a clipping area.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.rect(0, 0, 200, 200)
+            this.context.rect(0, 0, 100, 200)
             this.context.stroke()
             this.context.clip()
             this.context.fillStyle = "rgb(255,0,0)"
-            this.context.fillRect(0, 0, 150, 150)
+            this.context.fillRect(0, 0, 200, 200)
           })
       }
       .width('100%')
@@ -1634,7 +1643,7 @@ Sets the current path to a clipping area.
 
 clip(path: Path2D, fillRule?: CanvasFillRule): void
 
-Sets a **Path2D** path to a clipping area. This API is a null API.
+Sets the current path to a clipping path.
 
 **Parameters**
 
@@ -1644,12 +1653,44 @@ Sets a **Path2D** path to a clipping area. This API is a null API.
 | 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**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct Clip {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          let region = new Path2D();
+          region.rect(80,10,20,130);
+          region.rect(40,50,100,50);
+          this.context.clip(region,"evenodd")
+          this.context.fillStyle = "rgb(255,0,0)"
+          this.context.fillRect(0, 0, this.context.width, this.context.height)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![en-us_image_000000127777779](figures/en-us_image_000000127777779.png)
+
 
 ### filter
 
 filter(filter: string): void
 
-Provides filter effects. This API is a null API.
+Provides filter effects. This API is a void API.
 
 **Parameters**
 
@@ -1662,21 +1703,21 @@ Provides filter effects. This API is a null API.
 
 getTransform(): Matrix2D
 
-Obtains the current transformation matrix being applied to the context. This API is a null API.
+Obtains the current transformation matrix being applied to the context. This API is a void API.
 
 
 ### resetTransform
 
 resetTransform(): void
 
-Resets the current transform to the identity matrix. This API is a null API.
+Resets the current transform to the identity matrix. This API is a void API.
 
 
 ### direction
 
 direction(direction: CanvasDirection): void
 
-Sets the current text direction used to draw text. This API is a null API.
+Sets the current text direction used to draw text. This API is a void API.
 
 
 ### rotate
@@ -1751,9 +1792,10 @@ Scales the canvas based on the given scale factors.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.strokeRect(10, 10, 25, 25)
+            this.context.lineWidth = 3
+            this.context.strokeRect(30, 30, 50, 50)
             this.context.scale(2, 2) // Scale to 200%
-            this.context.strokeRect(10, 10, 25, 25)
+            this.context.strokeRect(30, 30, 50, 50)
           })
       }
       .width('100%')
@@ -1772,6 +1814,7 @@ transform(a: number, b: number, c: number, d: number, e: number, f: number): voi
 Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects.
 
 > **NOTE**
+> 
 > The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
 >
 > - x' = scaleX \* x + skewY \* y + translateX
@@ -1877,7 +1920,7 @@ Resets the existing transformation matrix and creates a new transformation matri
 
 setTransform(transform?: Matrix2D): void
 
-Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a null API.
+Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API.
 
 
 ### translate
@@ -1983,7 +2026,7 @@ Draws an image on the canvas.
 
 createImageData(sw: number, sh: number): ImageData
 
-Creates an **ImageData** object with the specified dimensions. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+Creates an **[ImageData](ts-components-canvas-imagedata.md)** object with the specified dimensions.
 
 **Parameters**
 
@@ -1993,23 +2036,21 @@ Creates an **ImageData** object with the specified dimensions. For details, see
 | sh   | number | Yes   | 0    | Height of the **ImageData** object.|
 
 
-### createImageData
-
 createImageData(imageData: ImageData): ImageData
 
-Creates an **ImageData** object. For details, see [ImageData](ts-components-canvas-imagebitmap.md).
+Creates an **[ImageData](ts-components-canvas-imagedata.md)** object.
 
 **Parameters**
 
 | Name       | Type                                      | Mandatory  | Default Value  | Description               |
 | --------- | ---------------------------------------- | ---- | ---- | ----------------- |
-| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | Yes   | null | **ImageData** object with the same width and height copied from the original **ImageData** object.|
+| imagedata | [ImageData](ts-components-canvas-imagedata.md) | Yes   | null | **ImageData** object with the same width and height copied from the original **ImageData** object.|
 
   **Return value**
 
 | Type                                      | Description            |
 | ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | New **ImageData** object.|
+| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
 
 
 ### getPixelMap
@@ -2037,7 +2078,7 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi
 
 getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
-Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created with the pixels within the specified area on the canvas.
+Obtains the **[ImageData](ts-components-canvas-imagedata.md)** object created with the pixels within the specified area on the canvas.
 
 **Parameters**
 
@@ -2052,7 +2093,39 @@ Obtains the **[ImageData](ts-components-canvas-imagebitmap.md)** object created
 
 | Type                                      | Description            |
 | ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | **ImageData** object.|
+| [ImageData](ts-components-canvas-imagedata.md) | New **ImageData** object.|
+
+
+**Example**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct GetImageData {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.context.drawImage(this.img,0,0,130,130);
+          var imagedata = this.context.getImageData(50,50,130,130);
+          this.context.putImageData(imagedata,150,150);
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)
 
 
 ### putImageData
@@ -2061,13 +2134,13 @@ putImageData(imageData: ImageData, dx: number, dy: number): void
 
 putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
 
-Puts data from the given **[ImageData](ts-components-canvas-imagebitmap.md)** object into the specified rectangular area on the canvas.
+Puts an **[ImageData](ts-components-canvas-imagedata.md)** object onto a rectangular area on the canvas.
 
 **Parameters**
 
 | Name         | Type                                      | Mandatory  | Default Value         | Description                           |
 | ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
-| imagedata   | [ImageData](ts-components-canvas-imagebitmap.md) | Yes   | null         | **ImageData** object with pixels to put onto the canvas.           |
+| 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.|
@@ -2142,6 +2215,7 @@ Sets the dash line style.
           .onReady(() =>{
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
+            this.context.stroke()
           })
       }
       .width('100%')
@@ -2165,24 +2239,34 @@ Obtains the dash line style.
 | -------- | ------------------------ |
 | number[] | An array of numbers that specify distances to alternately draw a line and a gap.|
 
+
 **Example**
 
   ```ts
   // xxx.ets
-  @Entry
-  @Component
-  struct GetLineDash {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+@Entry
+@Component
+struct CanvasGetLineDash {
+  @State message: string = 'Hello World'
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+          .onClick(()=>{
+            console.error('before getlinedash clicked')
+            let res = this.context.getLineDash()
+            console.error(JSON.stringify(res))
+          })
         Canvas(this.context)
           .width('100%')
           .height('100%')
           .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
+          .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
             this.context.stroke();
@@ -2190,17 +2274,20 @@ Obtains the dash line style.
           })
       }
       .width('100%')
-      .height('100%')
     }
+    .height('100%')
   }
+}
   ```
+![en-us_image_000000127777778](figures/en-us_image_000000127777778.png) 
+
 
 
 ### imageSmoothingQuality
 
 imageSmoothingQuality(quality: imageSmoothingQuality)
 
-Sets the quality of image smoothing. This API is a null API.
+Sets the quality of image smoothing. This API is a void API.
 
  **Parameters**
 
@@ -2220,7 +2307,7 @@ Displays the specified **ImageBitmap** object.
 
 | Name    | Type                                      | Description                |
 | ------ | ---------------------------------------- | ------------------ |
-| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
+| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | **ImageBitmap** object to display.|
 
 **Example**
 
@@ -2228,7 +2315,7 @@ Displays the specified **ImageBitmap** object.
   // xxx.ets
   @Entry
   @Component
-  struct PutImageData {
+  struct TransferFromImageBitmap {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2259,6 +2346,7 @@ Displays the specified **ImageBitmap** object.
   ```
   ![en-us_image_000000127777773](figures/en-us_image_000000127777773.png)  
 
+
 ### toDataURL
 
 toDataURL(type?: string, quality?: number): string
@@ -2328,7 +2416,11 @@ Restores the saved drawing context.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.restore()
+            this.context.save(); // save the default state
+            this.context.fillStyle = "green";
+            this.context.fillRect(20, 20, 100, 100);
+            this.context.restore(); // restore to the default state
+            this.context.fillRect(150, 75, 100, 100);
           })
       }
       .width('100%')
@@ -2336,6 +2428,7 @@ Restores the saved drawing context.
     }
   }
   ```
+  ![en-us_image_000000127777781](figures/en-us_image_000000127777781.png)
 
 
 ### save
@@ -2361,14 +2454,19 @@ Saves all states of the canvas in the stack. This API is usually called when the
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save()
-        })
+            this.context.save(); // save the default state
+            this.context.fillStyle = "green";
+            this.context.fillRect(20, 20, 100, 100);
+            this.context.restore(); // restore to the default state
+            this.context.fillRect(150, 75, 100, 100);
+          })
       }
       .width('100%')
       .height('100%')
     }
   }
   ```
+  ![en-us_image_000000127777781](figures/en-us_image_000000127777781.png)
 
 
 ### createLinearGradient

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

@@ -3,8 +3,9 @@
 The **\<Canvas>** component can be used to customize drawings.
 
 > **NOTE**
->
-> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> 
+>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 
 ## Required Permissions
@@ -37,7 +38,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 | ----------------------------- | ---- | -------------------- |
 | onReady(event: () => void) | -   | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.|
 
-## Example
+
+**Example**
 
 ```ts
 // xxx.ets
@@ -53,8 +55,8 @@ struct CanvasExample {
         .width('100%')
         .height('100%')
         .backgroundColor('#ffff00')
-        .onReady(() =>{
-          this.context.fillRect(0,30,100,100)
+        .onReady(() => {
+          this.context.fillRect(0, 30, 100, 100)
         })
     }
     .width('100%')
@@ -62,3 +64,4 @@ struct CanvasExample {
   }
 }
 ```
+  ![en-us_image_0000001194032666](figures/en-us_image_0000001194032666.png)

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

@@ -3,23 +3,27 @@
 **CanvasGradient** provides a canvas gradient object.
 
 >  **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.
 
 
+
 ## addColorStop
 
 addColorStop(offset: number, color: string): void
 
 Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
 
-- Parameters
+
+**Parameters**
+
   | Name    | Type    | Mandatory  | Default Value      | Description                          |
   | ------ | ------ | ---- | --------- | ---------------------------- |
   | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
   | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
-- Example
+
+**Example**
 
   ```ts
   // xxx.ets
@@ -48,10 +52,6 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
       .height('100%')
     }}
   ```
-
-
-
-
   ![en-us_image_0000001256858381](figures/en-us_image_0000001256858381.png)
 
  

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

 # ImageBitmap
 
->  **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.
+An **ImageBitmap** object stores pixel data rendered on a canvas.
 
+> **NOTE**
+> 
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-An **ImageBitmap** object stores pixel data rendered on a canvas.
 
 
 ## Attributes
 
-| Name| Type| Description|
+| Name| Type| Description| 
 | -------- | -------- | -------- |
-| width | number | Pixel width of the **ImageBitmap** object.|
-| height | number | Pixel height of the **ImageBitmap** object.|
+| width | number | Pixel width of the **ImageBitmap** object.| 
+| height | number | Pixel height of the **ImageBitmap** object.| 
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct ImageExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+        })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_0000001194352442](figures/en-us_image_0000001194352442.png)
+
 
 
 ## Methods

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

 # ImageData
 
-
 An **ImageData** object stores pixel data rendered on a canvas.
 
 >  **NOTE**
->
->  The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+> 
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 
 ## Attributes
 
-| Name| Type| Description|
+| Name| Type| Description| 
 | -------- | -------- | -------- |
-| width | number | Actual width of the rectangle on the canvas, in pixels.|
-| height | number | Actual height of the rectangle on the canvas, in pixels.|
-| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.|
+| width | number | Actual width of the rectangle on the canvas, in pixels.| 
+| height | number | Actual height of the rectangle on the canvas, in pixels.| 
+| data | Uint8ClampedArray | A one-dimensional array of color values. The values range from 0 to 255.| 
+
+**Example**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct Translate {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.context.drawImage(this.img,0,0,130,130);
+          var imagedata = this.context.getImageData(50,50,130,130);
+          this.context.putImageData(imagedata,150,150);
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![en-us_image_000000127777780](figures/en-us_image_000000127777780.png)

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

@@ -3,13 +3,10 @@
 **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.
 
 
-## Required Permissions
-
-None
-
 
 ## Modules to Import
 
@@ -32,7 +29,8 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea
 
 Loads an animation. Before calling this method, declare the **Animator('\__lottie\_ets')** object and check that the canvas layout is complete. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onAppear()** and **onPageShow()**.
 
-- Parameters
+**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"**|
@@ -50,12 +48,13 @@ destroy(name: string): void
 
 Destroys the animation. This method must be called when a page exits. This method can be used together with a lifecycle callback of the **Canvas** component, for example, **onDisappear()** and **onPageHide()**.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description                                      |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | Yes   | Name of the animation to destroy, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are destroyed.|
 
-- Example
+**Example** 
   ```ts
   // xxx.ets
   import lottie from '@ohos/lottieETS'
@@ -130,12 +129,14 @@ play(name: string): void
 
 Plays a specified animation.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description                                      |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | Yes   | Name of the animation to play, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are played.|
 
-- Example
+**Example**
+
   ```ts
   lottie.play(this.animateName)
   ```
@@ -147,12 +148,14 @@ pause(name: string): void
 
 Pauses a specified animation. The next time **lottie.play()** is called, the animation starts from the current frame.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description                                      |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | Yes   | Name of the animation to pause, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
-- Example
+**Example**
+
   ```ts
   lottie.pause(this.animateName)
   ```
@@ -164,12 +167,14 @@ togglePause(name: string): void
 
 Pauses or plays a specified animation. This method is equivalent to the switching between **lottie.play()** and **lottie.pause()**.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description                                      |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
-- Example
+**Example**
+
   ```ts
   lottie.togglePause(this.animateName)
   ```
@@ -181,12 +186,14 @@ stop(name: string): void
 
 Stops the specified animation. The next time **lottie.play()** is called, the animation starts from the first frame.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description                                      |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are paused.|
 
-- Example
+**Example**
+
   ```ts
   lottie.stop(this.animateName)
   ```
@@ -198,13 +205,15 @@ setSpeed(speed: number, name: string): void
 
 Sets the playback speed of the specified animation.
 
-- Parameters
+**Parameters**
+
   | Name   | Type    | Mandatory  | Description                                      |
   | ----- | ------ | ---- | ---------------------------------------- |
   | speed | number | Yes   | Playback speed. The value is a floating-point number. If the value is greater than 0, the animation plays in forward direction. If the value is less than 0, the animation plays in reversed direction. If the value is 0, the animation is paused. If the value is 1.0 or -1.0, the animation plays at the normal speed.|
   | name  | string | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are stopped.|
 
-- Example
+**Example**
+
   ```ts
   lottie.setSpeed(5, this.animateName)
   ```
@@ -216,13 +225,15 @@ setDirection(direction: AnimationDirection, name: string): void
 
 Sets the direction in which the specified animation plays.
 
-- Parameters
+**Parameters**
+
   | Name       | Type                | Mandatory  | Description                                      |
   | --------- | ------------------ | ---- | ---------------------------------------- |
   | direction | AnimationDirection | Yes   | Direction in which the animation plays. **1**: forwards; **-1**: backwards. When set to play backwards, the animation plays from the current playback progress to the first frame. When this setting is combined with **loop** being set to **true**, the animation plays backwards continuously. When the value of **speed** is less than 0, the animation also plays backwards.<br>AnimationDirection: 1 \| -1 |
   | name      | string             | Yes   | Name of the target animation, which is the same as the **name** in the **loadAnimation** interface. By default, all animations are set.|
 
-- Example
+**Example**
+
   ```ts
   lottie.setDirection(-1, this.animateName)
   ```
@@ -262,12 +273,14 @@ play(name?: string): void
 
 Plays an animation.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description             |
   | ---- | ------ | ---- | --------------- |
   | name | string | No   | Name of the target animation. By default, the value is null.|
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.play()
   ```
@@ -279,12 +292,14 @@ destroy(name?: string): void
 
 Destroys an animation.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description             |
   | ---- | ------ | ---- | --------------- |
   | name | string | No   | Name of the target animation. By default, the value is null.|
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.destroy()
   ```
@@ -296,12 +311,14 @@ pause(name?: string): void
 
 Pauses an animation. When the **play** interface is called next time, the animation is played from the current frame.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description             |
   | ---- | ------ | ---- | --------------- |
   | name | string | No   | Name of the target animation. By default, the value is null.|
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.pause()
   ```
@@ -313,12 +330,14 @@ togglePause(name?: string): void
 
 Pauses or plays an animation. This method is equivalent to the switching between **play** and **pause**.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description             |
   | ---- | ------ | ---- | --------------- |
   | name | string | No   | Name of the target animation. By default, the value is null.|
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.togglePause()
   ```
@@ -330,12 +349,14 @@ stop(name?: string): void
 
 Stops an animation. When the **play** interface is called next time, the animation is played from the first frame.
 
-- Parameters
+**Parameters**
+
   | Name  | Type    | Mandatory  | Description             |
   | ---- | ------ | ---- | --------------- |
   | name | string | No   | Name of the target animation. By default, the value is null.|
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.stop()
   ```
@@ -347,12 +368,14 @@ setSpeed(speed: number): void
 
 Sets the playback speed of an animation.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   this.animateItem.setSpeed(5);
   ```
@@ -364,12 +387,14 @@ setDirection(direction: AnimationDirection): void
 
 Sets the playback direction of an animation.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   this.animateItem.setDirection(-1)
   ```
@@ -381,14 +406,16 @@ goToAndStop(value: number, isFrame?: boolean): void
 
 Sets the animation to stop at the specified frame or time.
 
-- Parameters
+**Parameters**
+
   | Name     | Type     | Mandatory  | Description                                      |
   | ------- | ------- | ---- | ---------------------------------------- |
   | value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will stop.                    |
   | isFrame | boolean | No   | Whether to set the animation to stop at the specified frame. The value **true** means to set the animation to stop at the specified frame, and **false** means to set the animation to stop at the specified time progress. The default value is **false**.|
   | name    | string  | No   | Name of the target animation. By default, the value is null.                         |
 
-- Example
+**Example**
+
   ```ts
   // Set the animation to stop at the specified frame.
   this.animateItem.goToAndStop(25, true)
@@ -403,14 +430,16 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
 
 Sets the animation to start from the specified frame or time progress.
 
-- Parameters
+**Parameters**
+
   | Name     | Type     | Mandatory  | Description                                      |
   | ------- | ------- | ---- | ---------------------------------------- |
   | value   | number  | Yes   | Frame ID (greater than or equal to 0) or time progress (ms) at which the animation will start.                     |
   | isFrame | boolean | Yes   | Whether to set the animation to start from the specified frame. The value **true** means to set the animation to start from the specified frame, and **false** means to set the animation to start from the specified time progress. The default value is **false**.|
   | name    | string  | No   | Name of the target animation. By default, the value is null.                         |
 
-- Example
+**Example**
+
   ```ts
   // Set the animation to stop at the specified frame.
   this.animateItem.goToAndPlay(25, true)
@@ -425,13 +454,15 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
 
 Sets the animation to play only the specified segment.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   // Set the animation to play the specified segment.
   this.animateItem.playSegments([10, 20], false)
@@ -446,12 +477,14 @@ resetSegments(forceFlag: boolean): void
 
 Resets the settings configured by the **playSegments** method to play all the frames.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   this.animateItem.resetSegments(true)
   ```
@@ -463,7 +496,8 @@ resize(): void
 
 Resizes the animation layout.
 
-- Example
+**Example**
+
   ```ts
   this.animateItem.resize()
   ```
@@ -475,12 +509,14 @@ setSubframe(useSubFrame: boolean): void
 
 Sets the precision of the **currentFrame** attribute to display floating-point numbers.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   this.animateItem.setSubframe(false)
   ```
@@ -492,12 +528,14 @@ 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** interface.
 
-- Parameters
+**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. The default value is **false**.|
+  | 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**
 
-- Example
   ```ts
   this.animateItem.getDuration(true)
   ```
@@ -509,13 +547,15 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
 
 Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   private callbackItem: any = function() {
       console.log("grunt loopComplete")
@@ -533,13 +573,15 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
 
 Removes an event listener.
 
-- Parameters
+**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
+**Example**
+
   ```ts
   this.animateItem.removeEventListener('loopComplete', this.animateName)
   ```
@@ -551,13 +593,15 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
 
 Directly triggers all configured callbacks of a specified event.
 
-- Parameters
+**Parameters**
+
   | Name  | Type                | Mandatory  | Description       |
   | ---- | ------------------ | ---- | --------- |
   | name | AnimationEventName | Yes   | Animation event type. |
   | args | any                | Yes   | Custom callback parameters.|
 
-- Example
+**Example**
+
   ```ts
   private triggerCallBack: any = function(item) {
       console.log("trigger loopComplete, name:" + item.name)

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

 # Path2D
 
->  **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.
+**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
 
+>  **NOTE**
+> 
+> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
-**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
 
 
 ## addPath
@@ -16,11 +16,11 @@ Adds a path to this path.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| path | path2D | Yes| - | Path to be added to this path.|
-| transform | Matrix2D | No| null | Transformation matrix of the new path.|
-
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | path2D | Yes| - | Path to be added to this path.| 
+  | transform | Matrix2D | No| null | Transformation matrix of the new path.| 
+  
 
 **Example**
 
@@ -103,10 +103,10 @@ Moves the current coordinate point of the path to the target point, without draw
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| x | number | Yes| 0 | X-coordinate of the target point.|
-| y | number | Yes| 0 | Y-coordinate of the target point.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes| 0 | X-coordinate of the target point.| 
+  | y | number | Yes| 0 | Y-coordinate of the target point.| 
 
 **Example**
 
@@ -150,10 +150,10 @@ Draws a straight line from the current point to the target point.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| x | number | Yes| 0 | X-coordinate of the target point.|
-| y | number | Yes| 0 | Y-coordinate of the target point.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes| 0 | X-coordinate of the target point.| 
+  | y | number | Yes| 0 | Y-coordinate of the target point.| 
 
 **Example**
 
@@ -198,14 +198,14 @@ Draws a cubic bezier curve on the canvas.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.|
-| cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.|
-| cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.|
-| cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.|
-| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
-| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cp1x | number | Yes| 0 | X-coordinate of the first parameter of the bezier curve.| 
+  | cp1y | number | Yes| 0 | Y-coordinate of the first parameter of the bezier curve.| 
+  | cp2x | number | Yes| 0 | X-coordinate of the second parameter of the bezier curve.| 
+  | cp2y | number | Yes| 0 | Y-coordinate of the second parameter of the bezier curve.| 
+  | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| 
+  | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| 
 
 **Example**
 
@@ -226,7 +226,8 @@ Draws a cubic bezier curve on the canvas.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.path2Db.moveTo(10, 10)
-            this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
+            this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')
@@ -246,12 +247,12 @@ Draws a quadratic curve on the canvas.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.|
-| cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.|
-| x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.|
-| y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cpx | number | Yes| 0 | X-coordinate of the bezier curve parameter.| 
+  | cpy | number | Yes| 0 | Y-coordinate of the bezier curve parameter.| 
+  | x | number | Yes| 0 | X-coordinate of the end point on the bezier curve.| 
+  | y | number | Yes| 0 | Y-coordinate of the end point on the bezier curve.| 
 
 **Example**
 
@@ -293,14 +294,14 @@ Draws an arc on the canvas.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| x | number | Yes| 0 | X-coordinate of the center point of the arc.|
-| y | number | Yes| 0 | Y-coordinate of the center point of the arc.|
-| radius | number | Yes| 0 | Radius of the arc.|
-| startAngle | number | Yes| 0 | Start radian of the arc.|
-| endAngle | number | Yes| 0 | End radian of the arc.|
-| counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes| 0 | X-coordinate of the center point of the arc.| 
+  | y | number | Yes| 0 | Y-coordinate of the center point of the arc.| 
+  | radius | number | Yes| 0 | Radius of the arc.| 
+  | startAngle | number | Yes| 0 | Start radian of the arc.| 
+  | endAngle | number | Yes| 0 | End radian of the arc.| 
+  | counterclockwise | boolean | No| false | Whether to draw the arc counterclockwise.| 
 
 **Example**
 
@@ -320,7 +321,8 @@ Draws an arc on the canvas.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
+            this.path2Db.arc(100, 75, 50, 0, 6.28)
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')
@@ -340,13 +342,13 @@ Draws an arc based on the radius and points on the arc.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| x1 | number | Yes| 0 | X-coordinate of the first point on the arc.|
-| y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.|
-| x2 | number | Yes| 0 | X-coordinate of the second point on the arc.|
-| y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.|
-| radius | number | Yes| 0 | Radius of the arc.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x1 | number | Yes| 0 | X-coordinate of the first point on the arc.| 
+  | y1 | number | Yes| 0 | Y-coordinate of the first point on the arc.| 
+  | x2 | number | Yes| 0 | X-coordinate of the second point on the arc.| 
+  | y2 | number | Yes| 0 | Y-coordinate of the second point on the arc.| 
+  | radius | number | Yes| 0 | Radius of the arc.| 
 
 **Example**
 
@@ -387,16 +389,16 @@ Draws an ellipse in the specified rectangular region on the canvas.
 
 **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 | number | No| 0 | Whether to draw the ellipse counterclockwise. The value **0** means to draw the ellipse clockwise, and **1** means to draw the ellipse counterclockwise. This parameter is optional. The default value is **0**. |
+  | 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 | number | No| 0 | Whether to draw the ellipse counterclockwise. The value **0** means to draw the ellipse clockwise, and **1** means to draw the ellipse counterclockwise. This parameter is optional. The default value is **0**.| 
 
 **Example**
 
@@ -408,7 +410,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private path2Db: Path2D = new Path2D()
-  
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -416,7 +418,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2)
             this.context.stroke(this.path2Db)
           })
       }
@@ -437,12 +439,12 @@ Creates a rectangle on the canvas.
 
 **Parameters**
 
-| Name| Type| Mandatory| Default Value| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.|
-| y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.|
-| w | number | Yes| 0 | Width of the rectangle.|
-| h | number | Yes| 0 | Height of the rectangle.|
+  | Name| Type| Mandatory| Default Value| Description| 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | Yes| 0 | X-coordinate of the upper left corner of the rectangle.| 
+  | y | number | Yes| 0 | Y-coordinate of the upper left corner of the rectangle.| 
+  | w | number | Yes| 0 | Width of the rectangle.| 
+  | h | number | Yes| 0 | Height of the rectangle.| 
 
 **Example**
 
@@ -462,7 +464,8 @@ Creates a rectangle on the canvas.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
+            this.path2Db.rect(20, 20, 100, 100);
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')

en/application-dev/reference/arkui-ts/ts-drawing-components-path.md

@@ -89,4 +89,4 @@ struct PathExample {
 }
 ```
 
-![zh-cn_image_0000001219744193](figures/zh-cn_image_0000001219744193.png)
+![en-us_image_0000001219744193](figures/en-us_image_0000001219744193.png)

en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md

-# Interpolation Calculation
-
-Interpolation calculation can be implemented to set the animation interpolation curve, which is used to construct the step curve, cubic Bezier curve, and spring curve objects.
-
-> **NOTE**
->
-> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Modules to Import
-
-```js
-import Curves from '@ohos.curves'
-```
-
-
-## Curves.initCurve<sup>9+</sup>
-
-initCurve(curve?: Curve): ICurve
-
-
-Implements initialization for the interpolation curve, which is used to create an interpolation curve object based on the input parameter.
-
-**Parameters**
-
-| Name| Type                                                        | Mandatory| Default Value      | Description      |
-| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
-| curve  | [Curve](#curve-enums)| No  | Curve.Linear | Curve type.|
-
-**Return value**
-
-| Type                          | Description            |
-| ---------------------------------- | ---------------- |
-|  [ICurve](#icurve) | Interpolation object of the curve.|
-
-
-**Example**
-
-```ts
-import Curves from '@ohos.curves'
-Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
-```
-
-
-##  Curves.stepsCurve<sup>9+</sup>
-
-stepsCurve(count: number, end: boolean): ICurve
-
-
-Constructs a step curve object.
-
-**Parameters**
-
-| Name| Type   | Mandatory| Description                                                        |
-| ------ | ------- | ----| ------------------------------------------------------------ |
-| count  | number  | Yes  | Number of steps. Must be a positive integer.                                  |
-| end    | boolean | Yes  | Whether the step change occurs at the start or end point of each interval.<br>- **true**: The step change occurs at the end point.<br>- **false**: The step change occurs at the start point.|
-
-**Return value**
-
-| Type                          | Description            |
-| ---------------------------------- | ---------------- |
-|  [ICurve](#icurve) | Curve object.|
-
-
-**Example**
-
-```ts
-import Curves from '@ohos.curves'
-Curves.stepsCurve(9, true) // Create a step curve.
-```
-
-
-## Curves.cubicBezierCurve<sup>9+</sup>
-
-cubicBezierCurve(x1: number, y1: number, x2: number, y2: number): ICurve
-
-
-Constructs a third-order Bezier curve object. The curve value must be between 0 and 1.
-
-
-**Parameters**
-| Name | Type    | Mandatory  | Description            |
-| ---- | ------ | ---- | -------------- |
-| x1   | number | Yes   | Horizontal coordinate of the first point on the Bezier curve.|
-| y1   | number | Yes   | Vertical coordinate of the first point on the Bezier curve.|
-| x2   | number | Yes   | Horizontal coordinate of the second point on the Bezier curve.|
-| y2   | number | Yes   | Vertical coordinate of the second point on the Bezier curve.|
-
-**Return value**
-
-| Type                          | Description            |
-| ---------------------------------- | ---------------- |
-|  [ICurve](#icurve) | Curve object.|
-
-
-**Example**
-
-```ts
-import Curves from '@ohos.curves'
-Curves.cubicBezierCurve(0.1, 0.0, 0.1, 1.0) // Create a cubic Bezier curve.
-```
-
-
-##  Curves.springCurve<sup>9+</sup>
-
-springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve
-
-
-Constructs a spring curve object.
-
-
-**Parameters**
-| Name      | Type    | Mandatory  | Description   |
-| --------- | ------ | ---- | ----- |
-| velocity  | number | Yes   | Initial velocity. It is a parameter that affects the elastic dynamic effect by external factors. It aims to ensure the smooth transition from the previous motion state to the elastic dynamic effect.|
-| mass      | number | Yes   | Quality. The force object of the elastic system will have inertia effects on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
-| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
-| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion and the smaller the oscillation amplitude.|
-
-
-**Return value**
-
-| Type                          | Description            |
-| ---------------------------------- | ---------------- |
-|  [ICurve](#icurve)| Curve object.|
-
-
-**Example**
-
-```ts
-import Curves from '@ohos.curves'
-Curves.springCurve(100, 1, 228, 30) // Create a spring curve.
-```
-
-
-## ICurve
-
-
-### interpolate
-
-interpolate(fraction: number): number
-
-
-Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.
-
-**Parameters**
-
-| Name  | Type  | Mandatory| Description                                        |
-| -------- | ------ | ---- | -------------------------------------------- |
-| fraction | number | Yes  | Current normalized time. The value ranges from 0 to 1.|
-
-**Return value**
-
-| Type  | Description                                |
-| ------ | ------------------------------------ |
-| number | The curve interpolation corresponding to the normalized time point is returned.|
-
-**Example**
-
-```ts
-import Curves from '@ohos.curves'
-let curve = Curves.initCurve(Curve.EaseIn) // Create an ease-in curve.
-let value: number = curve.interpolate(0.5) // Calculate the interpolation for half of the time.
-```
-
-
-## Curves.init<sup>(deprecated)</sup>
-
-init(curve?: Curve): string
-
-
-Implements initialization to create a curve object based on the input parameter. This API is deprecated since API version 9. Use [Curves.initCurve](#curvesinitcurve9) instead.
-
-**Parameters**
-
-| Name| Type                                                        | Mandatory| Default Value      | Description      |
-| ------ | ------------------------------------------------------------ | ---- | ------------ | ---------- |
-| curve  |[Curve](#curve-enums)| No  | Curve.Linear | Curve type.|
-
-
-## Curves.steps<sup>(deprecated)</sup>
-
-steps(count: number, end: boolean): string
-
-
-Constructs a step curve object. This API is deprecated since API version 9. Use [Curves.stepsCurve](# curvesstepscurve9) instead.
-
-**Parameters**
-
-| Name| Type   | Mandatory| Description                                                        |
-| ------ | ------- | ----| ------------------------------------------------------------ |
-| count  | number  | Yes  | Number of steps. Must be a positive integer.                                  |
-| end    | boolean | Yes  | Whether the step change occurs at the start or end of each interval.<br>- **true**: The step change occurs at the end point.<br>- **false**: The step change occurs at the start point.|
-
-
-## Curves.cubicBezier<sup>(deprecated)</sup>
-
-cubicBezier(x1: number, y1: number, x2: number, y2: number): string
-
-
-Constructs a cubic Bezier curve object. The curve value must range from 0 to 1. This API is deprecated since API version 9. Use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
-
-
-**Parameters**
-| Name | Type    | Mandatory  | Description            |
-| ---- | ------ | ---- | -------------- |
-| x1   | number | Yes   | Horizontal coordinate of the first point on the Bezier curve.|
-| y1   | number | Yes   | Vertical coordinate of the first point on the Bezier curve.|
-| x2   | number | Yes   | Horizontal coordinate of the second point on the Bezier curve.|
-| y2   | number | Yes   | Vertical coordinate of the second point on the Bezier curve.|
-
-
-## Curves.spring<sup>(deprecated)</sup>
-
-spring(velocity: number, mass: number, stiffness: number, damping: number): string
-
-
-Constructs a spring curve object. This API is deprecated since API version 9. Use [Curves.cubicBezierCurve](#curvescubicbeziercurve9) instead.
-
-**Parameters**
-
-| Name      | Type    | Mandatory  | Description   |
-| --------- | ------ | ---- | ----- |
-| velocity  | number | Yes   | Initial velocity. It is a parameter that affects the elastic dynamic effect by external factors. It aims to ensure the smooth transition from the previous motion state to the elastic dynamic effect.|
-| mass      | number | Yes   | Quality. The force object of the elastic system will have inertia effects on the elastic system. The greater the mass, the greater the amplitude of the oscillation, and the slower the speed of restoring to the equilibrium position.|
-| stiffness | number | Yes   | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
-| damping   | number | Yes   | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion and the smaller the oscillation amplitude.|
-
-
-## Curve
-
-| 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.|
-| 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).|
-
-
-## Example
-
-```ts
-// xxx.ets
-import Curves from '@ohos.curves'
-@Entry
-@Component
-struct ImageComponent {
-  @State widthSize: number = 200
-  @State heightSize: number = 200
-  build() {
-    Column() {
-      Text()
-        .margin({top:100})
-        .width(this.widthSize)
-        .height(this.heightSize)
-        .backgroundColor(Color.Red)
-        .onClick(()=> {
-          let curve = Curves.cubicBezierCurve(0.25, 0.1, 0.25, 1.0);
-          this.widthSize = curve.interpolate(0.5) * this.widthSize;
-          this.heightSize = curve.interpolate(0.5) * this.heightSize;
-        })
-        .animation({duration: 2000 , curve: Curves.stepsCurve(9, true)})
-    }.width("100%").height("100%")
-  }
-}
-```
-![en-us_image_0000001212058456](figures/en-us_image_0000001212058456.gif)

en/application-dev/reference/arkui-ts/ts-matrix-transformation.md

-# Matrix Transformation
-
-Matrix transformation enables you to rotate, scale, skew, or translate an image.
-
-> **NOTE**
->
-> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
-## Modules to Import
-
-```ts
-import matrix4 from '@ohos.matrix4'
-```
-
-
-## matrix4.init
-
-init(array: Array<number>): Matrix4Transit
-
-
-Matrix constructor, which is used to create a 4x4 matrix by using the input parameter. Column-major order is used.
-
-**Parameters**
-
-| Name| Type               | Mandatory| Description                                                        |
-| ------ | ------------------- | ---- | ------------------------------------------------------------ |
-| array  | Array&lt;number&gt; | Yes  | A number array whose length is 16 (4 x 4). For details, see **array**.<br>Default value:<br>[1, 0, 0, 0,<br>0, 1, 0, 0,<br>0, 0, 1, 0,<br>0, 0, 0, 1] |
-
-**Return value**
-
-| Type          | Description                        |
-| -------------- | ---------------------------- |
-| Matrix4Transit | 4x4 matrix object created based on the input parameter.|
-
-**array**
-
-| Name | Type    | Mandatory  | Description                  |
-| ---- | ------ | ---- | -------------------- |
-| m00  | number | Yes   | Scaling value of the x-axis. Defaults to **1** for the identity matrix.     |
-| m01  | number | Yes   | The second value, which is affected by the rotation of the x, y, and z axes.  |
-| m02  | number | Yes   | The third value, which is affected by the rotation of the x, y, and z axes.  |
-| m03  | number | Yes   | Meaningless.              |
-| m10  | number | Yes   | The fifth value, which is affected by the rotation of the x, y, and z axes.  |
-| m11  | number | Yes   | Scaling value of the y-axis. Defaults to **1** for the identity matrix.     |
-| m12  | number | Yes   | The seventh value, which is affected by the rotation of the x, y, and z axes.  |
-| m13  | number | Yes   | Meaningless.              |
-| m20  | number | Yes   | The ninth value, which is affected by the rotation of the x, y, and z axes.  |
-| m21  | number | Yes   | The tenth value, which is affected by the rotation of the x, y, and z axes. |
-| m22  | number | Yes   | Scaling value of the z-axis. Defaults to **1** for the identity matrix.     |
-| m23  | number | Yes   | Meaningless.              |
-| m30  | number | Yes   | Translation value of the x-axis, in px. Defaults to **0** for the identity matrix.|
-| m31  | number | Yes   | Translation value of the y-axis, in px. Defaults to **0** for the identity matrix.|
-| m32  | number | Yes   | Translation value of the z-axis, in px. Defaults to **0** for the identity matrix.|
-| m33  | number | Yes   | Valid in homogeneous coordinates, presenting the perspective projection effect.   |
-
-**Example**
-
-```ts
-import matrix4 from '@ohos.matrix4'
-// Create a 4x4 matrix.
-let matrix = matrix4.init([1.0, 0.0, 0.0, 0.0,
-                          0.0, 1.0, 0.0, 0.0,
-                          0.0, 0.0, 1.0, 0.0,
-                          0.0, 0.0, 0.0, 1.0])
-@Entry
-@Component
-struct Tests {
-  build() {
-    Column() {
-      Image($r("app.media.zh"))
-        .width("40%")
-        .height(100)
-        .transform(matrix)
-    }
-  }
-}
-```
-
-
-## matrix4.identity
-
-identity(): Matrix4Transit
-
-
-Matrix initialization function. Can return an identity matrix object.
-
-**Return value**
-
-| Type          | Description          |
-| -------------- | -------------- |
-| Matrix4Transit | Identity matrix object.|
-
-**Example**
-
-```ts
-// The effect of matrix 1 is the same as that of matrix 2.
-import matrix4 from '@ohos.matrix4'
-let matrix1 = matrix4.init([1.0, 0.0, 0.0, 0.0,
-                          0.0, 1.0, 0.0, 0.0,
-                          0.0, 0.0, 1.0, 0.0,
-                          0.0, 0.0, 0.0, 1.0])
-let matrix2 = matrix4.identity()
-@Entry
-@Component
-struct Tests {
-  build() {
-    Column() {
-      Image($r("app.media.zh"))
-        .width("40%")
-        .height(100)
-        .transform(matrix1)
-      Image($r("app.media.zh"))
-        .width("40%")
-        .height(100)
-        .margin({ top: 150 })
-        .transform(matrix2)
-    }
-  }
-}
-```
-
-
-## matrix4.copy
-
-copy(): Matrix4Transit
-
-
-Matrix copy function, which is used to copy the current matrix object.
-
-**Return value**
-
-| Type          | Description                |
-| -------------- | -------------------- |
-| Matrix4Transit | Copy object of the current matrix.|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-@Entry
-@Component
-struct Test {
-  private matrix1 = Matrix4.identity().translate({x:100})
-  private matrix2 = this.matrix1.copy().scale({x:2})
-
-  build() {
-    Column() {
-      Image($r("app.media.bg1"))
-        .width("40%")
-        .height(100)
-        .transform(this.matrix1)
-      Image($r("app.media.bg2"))
-        .width("40%")
-        .height(100)
-        .margin({top:50})
-        .transform(this.matrix2)
-    }
-  }
-}
-```
-
-![en-us_image_0000001256858419](figures/en-us_image_0000001256858419.png)
-
-
-## Matrix4
-
-
-### combine
-
-combine(matrix: Matrix4): Matrix4Transit
-
-
-Matrix overlay function, which is used to overlay the effects of two matrices to generate a new matrix object.
-
-**Parameters**
-
-| Name| Type   | Mandatory| Description              |
-| ------ | ------- | ---- | ------------------ |
-| matrix | Matrix4 | Yes  | Matrix object to be overlaid.|
-
-**Return value**
-
-| Type          | Description              |
-| -------------- | ------------------ |
-| Matrix4Transit | Object after matrix overlay.|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-@Entry
-@Component
-struct Test {
-  private matrix1 = matrix4.identity().translate({x:200}).copy()
-  private matrix2 = matrix4.identity().scale({x:2}).copy()
-
-  build() {
-    Column() {
-      // Before matrix transformation
-      Image($r("app.media.icon"))
-        .width("40%")
-        .height(100)
-        .margin({top:50})
-      // Translate the x-axis by 200px, and then scale down the x-axis twice.
-      Image($r("app.media.icon"))
-        .transform(this.matrix1.combine(this.matrix2))
-        .width("40%")
-      .height(100)
-        .margin({top:50})
-    }
-  }
-}
-```
-
-![en-us_image_0000001212378428](figures/en-us_image_0000001212378428.png)
-
-
-### invert
-
-invert(): Matrix4Transit
-
-
-Matrix inverse function. Can return an inverse matrix of the current matrix object, that is, get an opposite effect.
-
-**Return value**
-
-| Type          | Description                  |
-| -------------- | ---------------------- |
-| Matrix4Transit | Inverse matrix object of the current matrix.|
-
-**Example**
-
-```ts
-import matrix4 from '@ohos.matrix4'
-// The effect of matrix 1 (width scaled up by 2x) is opposite to that of matrix 2 (width scaled down by 2x).
-let matrix1 = matrix4.identity().scale({x:2})
-let matrix2 = matrix1.invert()
-@Entry
-@Component
-struct Tests {
-  build() {
-    Column() {
-      Image($r("app.media.zh"))
-        .width(200)
-        .height(100)
-        .transform(matrix1)
-        .margin({ top: 100 })
-      Image($r("app.media.zh"))
-        .width(200)
-        .height(100)
-        .margin({ top: 150 })
-        .transform(matrix2)
-    }
-  }
-}
-```
-
-
-### translate
-
-translate({x?: number, y?: number, z?: number}): Matrix4Transit
-
-
-Matrix translation function, which is used to add the translation effect to the x, y, and z axes of the current matrix.
-
-**Parameter**
-
-| Name| Type  | Mandatory| Description                                 |
-| ------ | ------ | ---- | ------------------------------------- |
-| x      | number | No  | Translation distance of the x-axis, in px.<br>Default value: **0**|
-| y      | number | No  | Translation distance of the y-axis, in px.<br>Default value: **0**|
-| z      | number | No  | Translation distance of the z-axis, in px.<br>Default value: **0**|
-
-**Return value**
-
-| Type          | Description                        |
-| -------------- | ---------------------------- |
-| Matrix4Transit | Matrix object after the translation effect is added.|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-@Entry
-@Component
-struct Test {
-  private matrix1 = matrix4.identity().translate({x:100, y:200, z:30})
-
-  build() {
-    Column() {
-      Image($r("app.media.bg1")).transform(this.matrix1)
-        .width("40%")
-        .height(100)
-    }
-  }
-}
-```
-
-![en-us_image_0000001212058494](figures/en-us_image_0000001212058494.png)
-
-
-### scale
-
-scale({x?: number, y?: number, z?: number, centerX?: number, centerY?: number}): Matrix4Transit
-
-
-Matrix scaling function, which is used to add the scaling effect to the x, y, and z axes of the current matrix.
-
-**Parameters**
-
-| Name | Type  | Mandatory| Description                             |
-| ------- | ------ | ---- | --------------------------------- |
-| x       | number | No  | Scaling multiple of the x-axis.<br>Default value: **1**    |
-| y       | number | No  | Scaling multiple of the y-axis.<br>Default value: **1**    |
-| z       | number | No  | Scaling multiple of the z-axis.<br>Default value: **1**    |
-| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
-| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
-
-**Return value**
-
-| Type          | Description                        |
-| -------------- | ---------------------------- |
-| Matrix4Transit | Matrix object after the scaling effect is added.|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-@Entry
-@Component
-struct Test {
-  private matrix1 = matrix4.identity().scale({x:2, y:3, z:4, centerX:50, centerY:50})
-
-  build() {
-    Column() { 
-      Image($r("app.media.bg1")).transform(this.matrix1)
-        .width("40%")
-        .height(100)
-    }
-  }
-}
-```
-
-![zh-cn_image_0000001219864131](figures/zh-cn_image_0000001219864131.png)
-
-
-### rotate
-
-rotate({x?: number, y?: number, z?: number, angle?: number, centerX?: Length, centerY?: Length}): Matrix4Transit
-
-
-Matrix rotation function, which is used to add the rotation effect to the x, y, and z axes of the current matrix.
-
-**Parameters**
-
-| Name | Type  | Mandatory| Description                             |
-| ------- | ------ | ---- | --------------------------------- |
-| x       | number | No  | X coordinate of the rotation axis vector.<br>Default value: **1**  |
-| y       | number | No  | Y coordinate of the rotation axis vector.<br>Default value: **1**  |
-| z       | number | No  | Z coordinate of the rotation axis vector.<br>Default value: **1**  |
-| angle   | number | No  | Rotation angle.<br>Default value: **0**         |
-| centerX | number | No  | X coordinate of the center point.<br>Default value: **0**|
-| centerY | number | No  | Y coordinate of the center point.<br>Default value: **0**|
-
-**Return value**
-
-| Type          | Description                        |
-| -------------- | ---------------------------- |
-| Matrix4Transit | Matrix object after the rotation effect is added.|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-@Entry
-@Component
-struct Test {
-  private matrix1 = matrix4.identity().rotate({x:1, y:1, z:2, angle:30})
-
-  build() {
-    Column() {
-      Image($r("app.media.bg1")).transform(this.matrix1)
-        .width("40%")
-        .height(100)
-    }.width("100%").margin({top:50})
-  }
-}
-```
-
-![en-us_image_0000001211898504](figures/en-us_image_0000001211898504.png)
-
-
-### transformPoint
-
-transformPoint(point: Point): Point
-
-
-Matrix point transformation function, which is used to apply the current transformation effect to a coordinate point.
-
-**Parameters**
-
-| Name| Type | Mandatory| Description              |
-| ------ | ----- | ---- | ------------------ |
-| point  | Point | Yes  | Point to be transformed.|
-
-**Return value**
-
-| Type   | Description              |
-| ----- | ---------------- |
-| Point | Point object after matrix transformation|
-
-**Example**
-
-```ts
-// xxx.ets
-import matrix4 from '@ohos.matrix4'
-import prompt from '@system.prompt'
-
-@Entry
-@Component
-struct Test {
-  private matrix1 = matrix4.identity().transformPoint([100, 10])
-  
-  build() {
-    Column() {
-     Button("get Point")
-      .onClick(() => {
-       prompt.showToast({message:JSON.stringify(this.matrix1),duration:2000})
-      }).backgroundColor(0x2788D9)
-    }.width("100%").padding(50)
-  }
-}
-```
-
-![en-us_image_0000001212218464](figures/en-us_image_0000001212218464.gif)

en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md

@@ -11,7 +11,7 @@ The area change event is triggered when the component's size, position, or any o
 
 | Name                                      | Bubbling Supported| Description                                    |
 | ---------------------------------------- | ---- | ---------------------------------------- |
-| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | No   | Triggered when the component area changes. For details about the **Area** type, see [Area](ts-types.md#area8).|
+| onAreaChange(event: (oldValue: [Area](ts-types.md#area8), newValue: [Area](ts-types.md#area8)) => void) | No   | Triggered when the component area changes.|
 
 
 ## Example
@@ -22,7 +22,7 @@ The area change event is triggered when the component's size, position, or any o
 @Component
 struct AreaExample {
   @State value: string = 'Text'
-  @State size1: string = ''
+  @State sizeValue: string = ''
 
   build() {
     Column() {
@@ -33,9 +33,9 @@ struct AreaExample {
         })
         .onAreaChange((oldValue: Area, newValue: Area) => {
           console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
-          this.size1 = JSON.stringify(newValue)
+          this.sizeValue = JSON.stringify(newValue)
         })
-      Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
+      Text('new area is: \n' + this.sizeValue).margin({ right: 30, left: 30 })
     }
     .width('100%').height('100%').margin({ top: 30 })
   }

en/application-dev/ui/Readme-EN.md

@@ -11,49 +11,11 @@
             - [Resource File Categories](ui-ts-basic-resource-file-categories.md)
             - [Resource Access](ts-resource-access.md)
         - [Pixel Units](ts-pixel-units.md)
-    - Declarative Syntax
-        - [About Usage of UI Description Specifications](ts-syntax-intro.md)
-        - About General UI Description Specifications
-            - [Basic Concepts](ts-general-ui-concepts.md)
-            - Declarative UI Description Specifications
-                - [Configuration Without Parameters](ts-parameterless-configuration.md)
-                - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
-                - [Attribute Configuration](ts-attribution-configuration.md)
-                - [Event Configuration](ts-event-configuration.md)
-                - [Child Component Configuration](ts-child-component-configuration.md)
-            - Componentization
-                - [@Component](ts-component-based-component.md)
-                - [@Entry](ts-component-based-entry.md)
-                - [@Preview](ts-component-based-preview.md)
-                - [@Builder](ts-component-based-builder.md)
-                - [@Extend](ts-component-based-extend.md)
-                - [@CustomDialog](ts-component-based-customdialog.md)
-                - [@Styles](ts-component-based-styles.md)
-        - About UI State Management
-            - [Basic Concepts](ts-ui-state-mgmt-concepts.md)
-            - Managing Component States
-                - [@State](ts-component-states-state.md)
-                - [@Prop](ts-component-states-prop.md)
-                - [@Link](ts-component-states-link.md)
-            - Managing Application States
-                - [AppStorage](ts-application-states-appstorage.md)
-                - [LocalStorage](ui-ts-local-storage.md)
-                - [PersistentStorage](ts-application-states-apis-persistentstorage.md)
-                - [Environment](ts-application-states-apis-environment.md)
-            - Managing Other States
-                - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
-                - [@Consume and @Provide](ts-other-states-consume-provide.md)
-                - [@Watch](ts-other-states-watch.md)
-        - Rendering Control Syntax
-            - [if/else](ts-rending-control-syntax-if-else.md)
-            - [ForEach](ts-rending-control-syntax-foreach.md)
-            - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
-        - About Componentization
-            - [build Function](ts-function-build.md)
+        
+        - Componentization
             - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
             - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
-            - [Examples: Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
-        - [About Syntactic Sugar](ts-syntactic-sugar.md)
+            - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
     - Common Component Development Guidelines
         - [Button](ui-ts-basic-components-button.md)
         - [Web](ui-ts-components-web.md)

en/application-dev/ui/arkui-overview.md

@@ -21,7 +21,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
 - Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
 - Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
 - Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
-- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+- Two development paradigms: ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
 
 | Development Paradigm | Description | Applicable To | Intended Audience |
 | -------- | -------- | -------- | -------- |

en/application-dev/ui/ts-application-states-apis-environment.md

-# Environment
-
-
-Environment is a singleton object created by the framework when the application is started. It provides the AppStorage with a series of environment state attributes required by the application. These attributes describe the device environment where the application runs. Environment and its attributes are immutable, and all attribute values are of the simple type. The following example shows how to obtain the semantic environment from Environment:
-
-
-```ts
-Environment.EnvProp("accessibilityEnabled", "default");
-var enable = AppStorage.Get("accessibilityEnabled");
-```
-
-
-accessibilityEnabled is the default system variable identifier provided by Environment. You need to bind the corresponding system attribute to the AppStorage. Then, you can use the methods or decorators in the AppStorage to access the corresponding system attribute data.
-
-
-## Environment APIs
-
-| key | Parameter | Return Value | Description |
-| -------- | -------- | -------- | -------- |
-| EnvProp | key: string,<br/>defaultValue: any | boolean | Binds this system attribute to the AppStorage. You are advised to use this API during application startup. If the attribute already exists in the AppStorage, false is returned. Do not use the variables in the AppStorage. Instead, call this method to bind environment variables. |
-| EnvProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates this system item array with the AppStorage. |
-| Keys | Array&lt;string&gt; | number | Returns the associated system item array. |
-
-
-## Built-in Environment Variables
-
-| key | Type | Description |
-| -------- | -------- | -------- |
-| accessibilityEnabled | boolean | Whether to enable accessibility. |
-| colorMode | ColorMode | Color mode. The options are as follows:<br/>- **ColorMode.LIGHT**: light mode.<br/>- **ColorMode.DARK**: dark mode. |
-| fontScale | number | Font scale. The value range is [0.85, 1.45]. |
-| fontWeightScale | number | Font weight scale. The value range is [0.6, 1.6]. |
-| layoutDirection | LayoutDirection | Layout direction. The options are as follows:<br/>- **LayoutDirection.LTR**: The direction is from left to right.<br/>- **LayoutDirection.RTL**: The direction is from right to left. |
-| languageCode | string | Current system language. The value is in lowercase, for example, zh. |

en/application-dev/ui/ts-application-states-apis-persistentstorage.md

-# PersistentStorage
-
-
-ArkUI provides some static methods in the PersistentStorage class for managing persistent data of applications. Persistent data with specific tags can be linked to the AppStorage, and then the persistent data can be accessed through the AppStorage APIs. Alternatively, the @StorageLink decorator can be used to access the variable of the specific key.
-
-
-| Name | Type | Return Value | Definition |
-| -------- | -------- | -------- | -------- |
-| PersistProp | key : string<br/>defaultValue: T | void | Changes the associated named attribute to persistent data in the AppStorage. The value overwriting sequence is as follows:<br/>- If the attribute exists in the AppStorage, use it to overwrite the value in Persistent.<br/>- If Persistent contains the specified attribute, use the attribute value in Persistent.<br/>- If the preceding conditions are not met, use defaultValue. The values null and undefined are not supported. |
-| DeleteProp | key: string | void | Cancels two-way binding. The value of this attribute will be deleted from the persistent storage. |
-| PersistProps | keys: {<br/>key: string,<br/>defaultValue: any<br/>}[] | void | Associates multiple named attribute bindings. |
-| Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
-
-
-> **NOTE**
->
-> - When using **PersistProp**, ensure that the input key exists in the AppStorage.
->
-> - **DeleteProp** takes effect only for the data that has been linked during the current startup.
-
-
-```ts
-// xxx.ets
-PersistentStorage.PersistProp("highScore", "0");
-
-@Entry
-@Component
-struct PersistentComponent {
-    @StorageLink('highScore') highScore: string = '0'
-    @State currentScore: number = 0
-    build() {
-        Column() {
-            if (this.currentScore === Number(this.highScore)) {
-                Text(`new highScore : ${this.highScore}`)
-            }
-            Button() {
-                Text(`goal!, currentScore : ${this.currentScore}`)
-                    .fontSize(10)
-            }.onClick(() => {
-                this.currentScore++
-                if (this.currentScore > Number(this.highScore)) {
-                    this.highScore = this.currentScore.toString()
-                }
-            })
-        }
-    }
-}
-```

en/application-dev/ui/ts-application-states-appstorage.md

-# AppStorage
-
-
-AppStorage is a singleton object in an application, which is created by the UI framework when the application is started and destroyed when the application exits. It is used to provide central storage for changing state attributes of an application. AppStorage contains all the state attributes that need to be accessed throughout the application. The AppStorage retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values.
-
-
-The UI component can synchronize the application state data with the AppStorage through the decorators. The application service logic can also be implemented by accessing the AppStorage through APIs.
-
-
-The selection state attribute of the AppStorage can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote devices and provide different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in the service logic.
-
-
-By default, the attributes in the AppStorage are changeable. If needed, AppStorage can also use immutable (read-only) attributes.
-
-
-## AppStorage APIs
-
-| Name | Type | Return Value | Definition |
-| -------- | -------- | -------- | -------- |
-| SetAndLink | key: string,<br/>defaultValue: T | @Link | Works in a way similar to the Link API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Link instance corresponding to the default value is created and returned. |
-| Set | key: string,<br/>newValue: T | void | Replaces the value of a saved key. |
-| Link | key: string | @Link | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the AppStorage, and attribute changes made through the AppStorage will be synchronized to the variable or component. If the attribute with this key does not exist or is read-only, undefined is returned. |
-| SetAndProp | propName: string,<br/>defaultValue: S | @Prop | Works in a way similar to the Prop API. If the current key is stored in the AppStorage, the value corresponding to the key is returned. If the key has not been created, a Prop instance corresponding to the default value is created and returned. |
-| Prop | key: string | @Prop | Returns one-way binding to an attribute with a given key if the attribute exists. This means that attribute changes made through the AppStorage will be synchronized to the variable or component, but attribute changes made by the variable or component will be synchronized to the AppStorage. The variable returned by this method is an immutable one, which is applicable both to the variable and immutable state attributes. If the attribute with the specified key does not exist, undefined is returned.<br/>**NOTE**<br/>The attribute value used in the prop method must be of a simple type. |
-| SetOrCreate | key: string,<br/>newValue: T | boolean | If an attribute that has the same name as the specified key exists: replaces the value of the attribute and returns true when the attribute can be modified; retains the original value of the attribute and returns false otherwise.<br/>If an attribute that has the same name as the specified key does not exist: creates an attribute whose key is key and value is newValue. The values null and undefined are not supported. |
-| Get | key: string | T or undefined | Obtains the value of the specified key. |
-| Has | propName: string | boolean | Checks whether the attribute corresponding to the specified key value exists. |
-| Keys | void | array&lt;string&gt; | Returns an array of strings containing all keys. |
-| Delete | key: string | boolean | Deletes the key-value pair for the specified key. Returns true if the key-value pair exists and is successfully deleted; returns false otherwise. |
-| Clear | void | boolean | Deletes all attributes. If any of the attributes is being referenced by a state variable, false is returned. |
-| IsMutable | key: string | boolean | Specifies whether the attribute exists and can be changed. |
-
-
-## Synchronization Between AppStorage and Components
-
-In [Managing Component States](ts-component-states-state.md), we have defined how to synchronize the state variables of child components with the @State decorated variables in the parent component or ancestor component, including @Prop, @Link, and @Consume.
-
-In this section, we'll describe how to synchronize component variables with the AppStorage through the @StorageLink and @StorageProp decorators.
-
-
-### @StorageLink Decorator
-
-Two-way data binding can be established between components and the AppStorage through state variables decorated by @StorageLink(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageLink decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to this variable in the component will be first synchronized to the AppStorage, and then to other bound instances, such as PersistentStorage or other bound UI components.
-
-
-### @StorageProp Decorator
-
-One-way data binding can be established between components and the AppStorage through state variables decorated by @StorageProp(_key_). Wherein, key is the attribute key value in the AppStorage. When a component containing the @StorageProp decorated variable is created, the variable is initialized using the value in the AppStorage. Changes made to the value in the AppStorage will cause the bound UI component to update the state.
-
-
-## Example
-
-
-```ts
-// xxx.ets
-
-@Entry
-@Component
-struct ComponentA {
-  @StorageLink('varA') varA: number = 2
-  @StorageProp('languageCode') lang: string = 'en'
-  private label: string = 'count'
-
-  aboutToAppear() {
-    this.label = (this.lang === 'en') ? 'Number' : 'Count'
-  }
-
-  build() {
-    Row({ space: 20 }) {
-
-      Button(`${this.label}: ${this.varA}`)
-        .onClick(() => {
-          AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
-        })
-      Button(`lang: ${this.lang}`)
-        .onClick(() => {
-          if (this.lang === 'zh') {
-            AppStorage.Set<string>('languageCode', 'en')
-          } else {
-            AppStorage.Set<string>('languageCode', 'en')
-          }
-          this.label = (this.lang === 'en') ? 'Number' : 'Count'
-        })
-    }
-  }
-}
-```
-
-Each time the user clicks the **Count** button, the value of **this.varA** will increase by 1. This variable is synchronized with varA in the AppStorage. Each time the user clicks the language icon, the value of **languageCode** in the AppStorage will be changed, and the change will be synchronized to the **this.lang** variable.

en/application-dev/ui/ts-attribution-configuration.md

-# Attribute Configuration
-
-
-Use attribute methods to configure component attributes. An attribute method follows the corresponding component and is bound to the component using the "." operator.
-
-
-- The following is an example of configuring the font size attribute of the Text component:
-    
-  ```ts
-  Text('123')
-      .fontSize(12)
-  ```
-
-
-- Use the "." operator to implement chain call to configure multiple attributes at the same time, as shown below:
-    
-  ```ts
-  Image('a.jpg')
-      .alt('error.jpg')    
-      .width(100)    
-      .height(100)
-  ```
-
-
-- In addition to constants, you can also pass variables or expressions, as shown below:
-    
-  ```ts
-  // Size, count, and offset are private variables defined in the component.
-  Text('hello')
-      .fontSize(this.size)
-  Image('a.jpg')
-      .width(this.count % 2 === 0 ? 100 : 200)    
-      .height(this.offset + 100)
-  ```
-
-
-- For attributes of preset components, the framework also provides some predefined enumeration types, which you can pass as parameters to methods. Enumeration types must meet the parameter type requirements on the enumeration type definitions for specific attributes. You can configure the font color and weight attributes of the Text component as follows:
-    
-  ```ts
-  Text('hello')
-      .fontSize(20)
-      .fontColor(Color.Red)
-      .fontWeight(FontWeight.Bold)
-  ```

en/application-dev/ui/ts-child-component-configuration.md

-# Child Component Configuration
-
-
-For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside "{ ... }". The **\<Column>**,  **\<Row>**,  **\<Stack>**,  **\<Button>**,  **\<Grid>**, and **\<List>** components are container components.
-
-
-- The following is a simple example of the **\<Column>** component:
-  
-  ```ts
-  Column() {
-      Text('Hello')
-          .fontSize(100)
-      Divider()
-      Text(this.myText)
-          .fontSize(100)
-          .fontColor(Color.Red)
-  }
-  ```
-
-
-- Multiple child components can be nested in the **\<Column>** component, as shown below:
-  
-  ```ts
-  Column() {
-      Column() {
-          Button() {
-              Text('+ 1')
-          }.type(ButtonType.Capsule)
-          .onClick(() => console.log ('+1 clicked!'))
-          Image('1.jpg')
-      }
-      Divider()
-      Column() {
-          Button() {
-              Text('+ 2')
-          }.type(ButtonType.Capsule)
-          .onClick(() => console.log ('+2 clicked!'))
-          Image('2.jpg')
-      }
-      Divider()
-      Column() {
-          Button() {
-              Text('+ 3')
-          }.type(ButtonType.Capsule)
-          .onClick(() => console.log('+3 clicked!'))
-          Image('3.jpg')
-      }
-  }.alignItems(HorizontalAlign.Center) // center align components inside Column
-  ```

en/application-dev/ui/ts-component-based-component.md

-# @Component
-
-A struct decorated by **@Component** has the componentization capability and can serve as an independent component. This type of component is also called a custom component, and its UI structure is described in the **build** method. Custom components have the following features:
-
-
-- Composability: Custom components can be used with preset or other components, as well as common attributes and methods.
-- Chain call<sup>9+</sup>: Universal attributes can be invoked in chain call mode to change the component style.
-- Reusable: Custom components can be reused by other components and used as different instances in different parent components or containers.
-- Lifecycle: Custom components provide callbacks for service logic processing throughout the lifecycle.
-- Data-driven update: The UI of custom components can be automatically updated based on the data of state variables.
-
-
-For details about componentization, see [About @Component](ts-custom-component-initialization.md).
-
-
->  **NOTE**
->
->  - The **build** method must be defined for a custom component.
->- Custom constructors are prohibited for custom components.
-
-
-The following code illustrates how to create a custom component named **MyComponent**:
-
-
-```ts
-@Component
-struct MyComponent {
-    build() {
-        Column() {
-            Text('my component')
-                .fontColor(Color.Red)
-        }.alignItems(HorizontalAlign.Center) // center align Text inside Column
-    }
-}
-```
-
-
-The **build** method of **MyComponent** is executed during initial rendering. When the component status changes, the **build** method will be executed again.
-
-
-The following code illustrates how to use **MyComponent**:
-
-
-```ts
-@Component
-struct ParentComponent {
-    build() {
-        Column() {
-            MyComponent()
-            Text('we use component')
-                .fontSize(20)
-        }
-    }
-}
-```
-
-
-**MyComponent** can be applied multiple times and reused in different components, as shown in the code below:
-
-
-```ts
-@Component
-struct ParentComponent {
-    build() {
-        Row() {
-            Column() {
-                MyComponent()
-                Text('first column')
-                    .fontSize(20)
-            }
-            Column() {
-                MyComponent()
-                Text('second column')
-                    .fontSize(20)
-            }
-        }
-    }
-
-    aboutToAppear() {
-        console.log('ParentComponent: Just created, about to become rendered first time.')
-    }
-
-    aboutToDisappear() {
-        console.log('ParentComponent: About to be removed from the UI.')
-    }
-}
-```
-
-Universal attributes can be invoked in chain call mode to diversify component styles.
-
-> **NOTE**
->
-> This feature is supported since API version 9.
->
-> The chain call for custom components does not support trailing closures in the following scenario: When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (as in `Index(){}`). You can consider a trailing closure as a container and add content to it, as in `{Column(){Text("content")}`.
-
-```ts
-@Entry
-@Component
-struct Index {
-  @State bannerValue: string = 'Hello,world';
-  build() {
-    Column() {
-      Chind({ ChindBannerValue:$bannerValue })
-      .height(60)
-      .width(250)
-      .border({ width:5, color:Color.Red, radius:10, style: BorderStyle.Dotted })
-    }
-  }
-}
-
-@Component
-struct Chind {
-  @Link ChindBannerValue: string;
-  build() {
-    Column() {
-      Text(this.ChindBannerValue)
-      .fontSize(30)
-    }
-  }
-}
-```

en/application-dev/ui/ts-component-based-extend.md

-#  @Extend
-
-The @Extend decorator adds new attribute functions to preset components, such as **\<Text>**, **\<Column>**, and **\<Button>**. You can use the @Extend decorator to quickly define and reuse the custom styles of a component.
-
-
-```ts
-// xxx.ets
-@Extend(Text) function fancy(fontSize: number) {
-  .fontColor(Color.Red)
-  .fontSize(fontSize)
-  .fontStyle(FontStyle.Italic)
-}
-
-@Entry
-@Component
-struct FancyUse {
-  build() {
-    Row({ space: 10 }) {
-      Text("Fancy")
-        .fancy(16)
-      Text("Fancy")
-        .fancy(24)
-    }
-  }
-}
-```
-
-> **NOTE**
->
-> The @Extend decorator cannot be used in the struct definition of a custom component.
\ No newline at end of file