Update docs (13549)

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

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

@@ -13,7 +13,7 @@ The **inputMethod** module provides an input method framework, which can be used
 import inputMethod from '@ohos.inputmethod';
 ```
 
-## Constants
+## Constants<sup>8+</sup>
 
 Provides the constants.
 
@@ -23,7 +23,7 @@ Provides the constants.
 | -------- | -------- | -------- | -------- |
 | MAX_TYPE_NUM | number | 128 | Maximum number of supported input methods.|
 
-## InputMethodProperty
+## InputMethodProperty<sup>8+</sup>
 
 Describes the input method application attributes.
 
@@ -56,7 +56,7 @@ Obtains an **[InputMethodController](#inputmethodcontroller)** instance.
 let inputMethodController = inputMethod.getInputMethodController();
 ```
 
-## inputMethod.getInputMethodSetting
+## inputMethod.getInputMethodSetting<sup>8+</sup>
 
 getInputMethodSetting(): InputMethodSetting
 
@@ -136,7 +136,7 @@ inputMethodController.stopInput().then((result) => {
 })
 ```
 
-## InputMethodSetting
+## InputMethodSetting<sup>8+</sup>
 
 In the following API examples, you must first use [getInputMethodSetting](#inputmethodgetinputmethodsetting) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance.
 
@@ -152,7 +152,7 @@ Obtains a list of installed input methods. This API uses an asynchronous callbac
 
 | Name  | Type                                              | Mandatory| Description                  |
 | -------- | -------------------------------------------------- | ---- | ---------------------- |
-| callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty)>&gt; | Yes  | Callback used to return the list of installed input methods.|
+| callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty8)>&gt; | Yes  | Callback used to return the list of installed input methods.|
 
 **Example**
 
@@ -166,7 +166,7 @@ inputMethodSetting.listInputMethod((err, data) => {
  });
 ```
 
-### listInputMethod
+### listInputMethod<sup>8+</sup>
 
 listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt;
 
@@ -190,7 +190,7 @@ inputMethodSetting.listInputMethod().then((data) => {
 })
 ```
 
-### displayOptionalInputMethod
+### displayOptionalInputMethod<sup>8+</sup>
 
 displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void
 
@@ -216,7 +216,7 @@ inputMethodSetting.displayOptionalInputMethod((err) => {
 });
 ```
 
-### displayOptionalInputMethod
+### displayOptionalInputMethod<sup>8+</sup>
 
 displayOptionalInputMethod(): Promise&lt;void&gt;
 

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

 # OffscreenCanvasRenderingContext2D
 
+>  **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.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->**OffscreenCanvasRenderingContext2D**  is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**.
 
+
 ## Attributes
 
 In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
 
 | Name    | Type    | Description                                      |
-| ------ | ------ | ------------------------------------------------------------ |
-| filter | string | Image filter.<br>Available options are as follows:<br/> - **blur**: applies the Gaussian blur for the image.<br/> - **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br/> - **contrast**: adjusts the image contrast.<br/> - **drop-shadow**: sets a shadow effect for the image.<br/> - **grayscale**: converts the image to a grayscale image.<br/> - **hue-rotate**: applies hue rotation to the image.<br/> - **invert**: inverts the input image.<br/> - **opacity**: opacity of the converted image.<br/> - **saturate**: saturation of the converted image.<br/> - **sepia**: converts the image to dark brown. |
-
-
--   Example
+| ------ | ------ | ---------------------------------------- |
+| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the image.<br>- **opacity**: sets the image opacity.<br>- **saturate**: sets the image saturation.<br>- **sepia**: converts the image to sepia.|
 
+**Example**
   ```
   <!-- xxx.hml -->
   <div style="width: 180px; height: 60px;">
@@ -69,34 +69,30 @@ In addition to the attributes that are supported by  **CanvasRenderingContext2D*
   }
   ```
 
-
-
 ## Methods
 
-In addition to the attributes that are supported by  **CanvasRenderingContext2D**, the following attributes are supported.
+In addition to the methods that are supported by **CanvasRenderingContext2D**, the following methods are supported.
+
 
 ### isPointInPath
 
-isPointInPath\(path?: Path2D, x: number, y: number\): boolean
+isPointInPath(path?: Path2D, x: number, y: number): boolean
 
 Checks whether a specified point is in the path area.
 
-- Parameters
-
-  | Name | Type   | Mandatory | Description                                                  |
-  | ---- | ------ | --------- | ------------------------------------------------------------ |
-  | path | Path2D | No        | Path used for checking. If this parameter is not set, the current path is used. |
-  | x    | number | Yes       | X-coordinate of the point used for checking.                 |
-  | y    | number | Yes       | Y-coordinate of the point used for checking.                 |
-
-- Return values
+**Parameters**
+| Name | Type  | Mandatory  | Description                           |
+| ---- | ------ | ---- | ----------------------------- |
+| path | Path2D | No   | Path used for checking. If this parameter is not set, the current path is used.|
+| x    | number | Yes   | X-coordinate of the point used for checking.                   |
+| y    | number | Yes   | Y-coordinate of the point used for checking.                   |
 
-  | Type    | Description                                    |
-  | ------- | ---------------------------------------------- |
-  | boolean | Whether a specified point is in the path area. |
-
--   Example
+**Return value**
+| Type     | Description           |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
 
+**Example**
   ```
   <!-- xxx.hml -->
   <div style="width: 180px; height: 60px;">
@@ -126,31 +122,27 @@ Checks whether a specified point is in the path area.
   }
   ```
 
-    ![](figures/en-us_image_0000001224354967.png)
-
+![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png)
 
 ### isPointInStroke
 
-isPointInStroke\(path?: Path2D, x: number, y: number\): boolean
+isPointInStroke(path?: Path2D, x: number, y: number): boolean
 
 Checks whether a specified point is on the edge line of a path.
 
--   Parameters
-
-    | Name | Type   | Mandatory | Description                                                  |
-    | ---- | ------ | --------- | ------------------------------------------------------------ |
-    | path | Path2D | No        | Path used for checking. If this parameter is not set, the current path is used. |
-    | x    | number | Yes       | X-coordinate of the point used for checking.                 |
-    | y    | number | Yes       | Y-coordinate of the point used for checking.                 |
-    
--   Return values
+**Parameters**
+| Name | Type  | Mandatory  | Description                           |
+| ---- | ------ | ---- | ----------------------------- |
+| path | Path2D | No   | Path used for checking. If this parameter is not set, the current path is used.|
+| x    | number | Yes   | X-coordinate of the point used for checking.                   |
+| y    | number | Yes   | Y-coordinate of the point used for checking.                   |
 
-    | Type    | Description                                    |
-    | ------- | ---------------------------------------------- |
-    | boolean | Whether a specified point is in the path area. |
-    
--   Example
+**Return value**
+| Type     | Description           |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
 
+**Example**
   ```
   <!-- xxx.hml -->
   <div style="width: 180px; height: 60px;">
@@ -180,15 +172,13 @@ Checks whether a specified point is on the edge line of a path.
   }
   ```
 
-    ![](figures/en-us_image_0000001178875308.png)
-
+![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png)
 
 ### resetTransform
 
-resetTransform\(\): void
-
--   Example
+resetTransform(): void
 
+**Example**
   ```
   <!-- xxx.hml -->
   <div style="width: 180px; height: 60px;">
@@ -209,13 +199,13 @@ resetTransform\(\): void
      var offscreenCanvasCtx = offscreen.getContext("2d");
   
      offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
-       offscreenCanvasCtx.fillStyle = 'gray';
+     offscreenCanvasCtx.fillStyle = '#a9a9a9';
      offscreenCanvasCtx.fillRect(40, 40, 50, 20);
      offscreenCanvasCtx.fillRect(40, 90, 50, 20);
   
      // Non-skewed rectangles
      offscreenCanvasCtx.resetTransform();
-       offscreenCanvasCtx.fillStyle = 'red';
+     offscreenCanvasCtx.fillStyle = '#ff0000';
      offscreenCanvasCtx.fillRect(40, 40, 50, 20);
      offscreenCanvasCtx.fillRect(40, 90, 50, 20);
   
@@ -225,5 +215,4 @@ resetTransform\(\): void
   }
   ```
 
-    ![](figures/en-us_image_0000001179035242.png)
-
+![en-us_image_0000001179035242](figures/en-us_image_0000001179035242.png)

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

@@ -428,7 +428,7 @@ struct LineDashOffset {
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
           this.context.lineDashOffset = 10.0
-          this.context.stroke()
+          this.context.stroke();
       })
     }
     .width('100%')
@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -802,8 +802,6 @@ Draws filled text on the canvas.
 | text     | string | Yes  | ''     | Text to draw.         |
 | x        | number | Yes  | 0      | X-coordinate of the lower left corner of the text.|
 | y        | number | Yes  | 0      | Y-coordinate of the lower left corner of the text.|
-| maxWidth | number | No  | -      | Maximum width allowed for the text.     |
-
 **Example**
 
   ```ts
@@ -1583,7 +1581,7 @@ struct Fill {
           region.lineTo(270, 90)
           region.closePath()
           // Fill path
-          this.context.fillStyle = 'green'
+          this.context.fillStyle = '#00ff00'
           this.context.fill(region, "evenodd")
         })
     }
@@ -2269,7 +2267,7 @@ struct CanvasGetLineDash {
           .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
-            this.context.stroke()
+            this.context.stroke();
             let res = this.context.getLineDash()
           })
       }
@@ -2408,6 +2406,7 @@ Restores the saved drawing context.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
   
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2417,7 +2416,7 @@ Restores the saved drawing context.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2455,7 +2454,7 @@ Saves all states of the canvas in the stack. This API is usually called when the
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2502,9 +2501,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
@@ -2553,9 +2552,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })

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

@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 
 **Parameters**
 
-  | Name    | Type    | Mandatory  | Default Value      | Description                          |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
+| Name    | Type    | Mandatory  | Default Value      | Description                          |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+| color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
 
 **Example**
@@ -41,9 +41,9 @@ struct Page45 {
         .backgroundColor('#ffff00')
         .onReady(() => {
           var grad = this.context.createLinearGradient(50, 0, 300, 100)
-          grad.addColorStop(0.0, 'red')
-          grad.addColorStop(0.5, 'white')
-          grad.addColorStop(1.0, 'green')
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
           this.context.fillRect(0, 0, 500, 500)
         })

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

@@ -182,7 +182,7 @@ struct LineCapExample {
 }
 ```
 
-![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG)
+![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.png)
 
 
 ### lineJoin
@@ -2625,9 +2625,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()
@@ -2679,9 +2679,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()