Update docs (20636)

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

en/application-dev/application-models/arkts-ui-widget-page-animation.md

 # Using Animations in the Widget
 
 
-To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [attribute animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets.
+To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [property animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets.
 
 
 **Table 1** Restrictions on animation parameters

en/application-dev/application-models/arkts-ui-widget-working-principles.md

@@ -35,7 +35,7 @@ As a quick entry to applications, ArkTS widgets outperform JS widgets in the fol
   ![WidgetProject](figures/WidgetProject.png)
   
 - More widget features
-  - Animation: ArkTS widgets support the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
+  - Animation: ArkTS widgets support the [property animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
   - Custom drawing: ArkTS widgets allow you to draw graphics with the [\<Canvas>](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
   - Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the use cases of widgets.
 

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

@@ -164,8 +164,8 @@
 - Advanced Components
   - [@ohos.multimedia.avCastPicker (AVCastPicker)](ohos-multimedia-avcastpicker.md)
 - Animation
-  - [AnimatorProperty](ts-animatorproperty.md)
-  - [Explicit Animatio](ts-explicit-animation.md)
+  - [Property Animation](ts-animatorproperty.md)
+  - [Explicit Animation](ts-explicit-animation.md)
   - Transition Animation
     - [Page Transition](ts-page-transition-animation.md)
     - [Component Transition](ts-transition-animation-component.md)

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

-# Property Animator
+# Property Animation
 
-You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
+You can animate certain properties of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
 
 > **NOTE**
 >
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
+animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations?: number, playMode?: PlayMode, onFinish?: () => void})
 
 Since API version 9, this API is supported in ArkTS widgets.
 

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

@@ -33,7 +33,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | [lineCap](#linecap)                      | CanvasLineCap                            | Style of the line endpoints. The options are as follows:<br>- **butt**: The endpoints of the line are squared off.<br>- **round**: The endpoints of the line are rounded.<br>- **square**: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.<br>- Default value: **'butt'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [lineJoin](#linejoin)                    | CanvasLineJoin                           | Style of the shape used to join line segments. The options are as follows:<br>- **round**: The intersection is a sector, whose radius at the rounded corner is equal to the line width.<br>- **bevel**: The intersection is a triangle. The rectangular corner of each line is independent.<br>- **miter**: The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.<br>- Default value: **'miter'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [miterLimit](#miterlimit)                | number                                   | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.<br>- Default value: **10**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| [font](#font)                            | string                                   | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and row height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and line height. The unit must be specified and can only be px or vp.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| [font](#font)                            | string                                   | Font style.<br>Syntax: ctx.font='font-size font-family'<br>- (Optional) **font-size**: font size and line height. The unit can only be pixels.<br>(Optional) **font-family**: font family.<br>Syntax: ctx.font='font-style font-weight font-size font-family'<br>- (Optional) **font-style**: font style. Available values are **normal** and **italic**.<br>- (Optional) **font-weight**: font weight. Available values are as follows: **normal**, **bold**, **bolder**, **lighter**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**.<br>- (Optional) **font-size**: font size and line height. The unit can be px or vp and must be specified.<br>- (Optional) **font-family**: font family. Available values are **sans-serif**, **serif**, and **monospace**.<br>Default value: **'normal normal 14px sans-serif'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [textAlign](#textalign)                  | CanvasTextAlign                          | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **right**: The text is right-aligned.<br>- **center**: The text is center-aligned.<br>- **start**: The text is aligned with the start bound.<br>- **end**: The text is aligned with the end bound.<br>**NOTE**<br><br>In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.<br>- Default value: **'left'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [textBaseline](#textbaseline)            | CanvasTextBaseline                       | Horizontal alignment mode of text. Available values are as follows:<br>- **alphabetic**: The text baseline is the normal alphabetic baseline.<br>- **top**: The text baseline is on the top of the text bounding box.<br>- **hanging**: The text baseline is a hanging baseline over the text.<br>- **middle**: The text baseline is in the middle of the text bounding box.<br>**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.<br>- **bottom**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.<br>- Default value: **'alphabetic'**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | [globalAlpha](#globalalpha)              | number                                   | Opacity.<br>**0.0**: completely transparent.<br>**1.0**: completely opaque.               |
@@ -61,7 +61,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 struct FillStyleExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -70,9 +70,41 @@ struct FillStyleExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.fillStyle = '#0000ff'
-          this.offContext.fillRect(20, 20, 150, 100)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = '#0000ff'
+          offContext.fillRect(20, 20, 150, 100)
+          var image = this.offCanvas.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct FillStyleExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = 0x0000FF
+          offContext.fillRect(20, 20, 150, 100)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }
@@ -94,7 +126,7 @@ struct FillStyleExample {
 struct LineWidthExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -103,9 +135,10 @@ struct LineWidthExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.lineWidth = 5
-          this.offContext.strokeRect(25, 25, 85, 105)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.lineWidth = 5
+          offContext.strokeRect(25, 25, 85, 105)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -127,7 +160,7 @@ struct LineWidthExample {
 struct StrokeStyleExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -136,10 +169,43 @@ struct StrokeStyleExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.lineWidth = 10
-          this.offContext.strokeStyle = '#0000ff'
-          this.offContext.strokeRect(25, 25, 155, 105)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.lineWidth = 10
+          offContext.strokeStyle = '#0000ff'
+          offContext.strokeRect(25, 25, 155, 105)
+          var image = this.offCanvas.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+```
+
+
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct StrokeStyleExample {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.lineWidth = 10
+          offContext.strokeStyle = 0x0000ff
+          offContext.strokeRect(25, 25, 155, 105)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }
@@ -161,7 +227,7 @@ struct StrokeStyleExample {
 struct LineCapExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -170,13 +236,14 @@ struct LineCapExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.lineWidth = 8
-          this.offContext.beginPath()
-          this.offContext.lineCap = 'round'
-          this.offContext.moveTo(30, 50)
-          this.offContext.lineTo(220, 50)
-          this.offContext.stroke()
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.lineWidth = 8
+          offContext.beginPath()
+          offContext.lineCap = 'round'
+          offContext.moveTo(30, 50)
+          offContext.lineTo(220, 50)
+          offContext.stroke()
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }
@@ -198,7 +265,7 @@ struct LineCapExample {
 struct LineJoinExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -207,14 +274,15 @@ struct LineJoinExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.beginPath()
-          this.offContext.lineWidth = 8
-          this.offContext.lineJoin = 'miter'
-          this.offContext.moveTo(30, 30)
-          this.offContext.lineTo(120, 60)
-          this.offContext.lineTo(30, 110)
-          this.offContext.stroke()
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.beginPath()
+          offContext.lineWidth = 8
+          offContext.lineJoin = 'miter'
+          offContext.moveTo(30, 30)
+          offContext.lineTo(120, 60)
+          offContext.lineTo(30, 110)
+          offContext.stroke()
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -236,7 +304,7 @@ struct LineJoinExample {
 struct MiterLimit {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -245,14 +313,15 @@ struct MiterLimit {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.lineWidth = 8
-          this.offContext.lineJoin = 'miter'
-          this.offContext.miterLimit = 3
-          this.offContext.moveTo(30, 30)
-          this.offContext.lineTo(60, 35)
-          this.offContext.lineTo(30, 37)
-          this.offContext.stroke()
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.lineWidth = 8
+          offContext.lineJoin = 'miter'
+          offContext.miterLimit = 3
+          offContext.moveTo(30, 30)
+          offContext.lineTo(60, 35)
+          offContext.lineTo(30, 37)
+          offContext.stroke()
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -274,7 +343,7 @@ struct MiterLimit {
 struct Fonts {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -283,9 +352,10 @@ struct Fonts {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.font = '30px sans-serif'
-          this.offContext.fillText("Hello World", 20, 60)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.font = '30px sans-serif'
+          offContext.fillText("Hello World", 20, 60)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -307,7 +377,7 @@ struct Fonts {
 struct CanvasExample {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -316,24 +386,25 @@ struct CanvasExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-        this.offContext.strokeStyle = '#0000ff'
-        this.offContext.moveTo(140, 10)
-        this.offContext.lineTo(140, 160)
-        this.offContext.stroke()
-
-        this.offContext.font = '18px sans-serif'
-
-        this.offContext.textAlign = 'start'
-        this.offContext.fillText('textAlign=start', 140, 60)
-        this.offContext.textAlign = 'end'
-        this.offContext.fillText('textAlign=end', 140, 80)
-        this.offContext.textAlign = 'left'
-        this.offContext.fillText('textAlign=left', 140, 100)
-        this.offContext.textAlign = 'center'
-        this.offContext.fillText('textAlign=center',140, 120)
-        this.offContext.textAlign = 'right'
-        this.offContext.fillText('textAlign=right',140, 140)
-        var image = this.offContext.transferToImageBitmap()
+        var offContext = this.offCanvas.getContext("2d", this.settings)
+        offContext.strokeStyle = '#0000ff'
+        offContext.moveTo(140, 10)
+        offContext.lineTo(140, 160)
+        offContext.stroke()
+
+        offContext.font = '18px sans-serif'
+
+        offContext.textAlign = 'start'
+        offContext.fillText('textAlign=start', 140, 60)
+        offContext.textAlign = 'end'
+        offContext.fillText('textAlign=end', 140, 80)
+        offContext.textAlign = 'left'
+        offContext.fillText('textAlign=left', 140, 100)
+        offContext.textAlign = 'center'
+        offContext.fillText('textAlign=center',140, 120)
+        offContext.textAlign = 'right'
+        offContext.fillText('textAlign=right',140, 140)
+        var image = this.offCanvas.transferToImageBitmap()
         this.context.transferFromImageBitmap(image)
       })
     }
@@ -355,7 +426,7 @@ struct CanvasExample {
 struct TextBaseline {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -364,24 +435,25 @@ struct TextBaseline {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.strokeStyle = '#0000ff'
-          this.offContext.moveTo(0, 120)
-          this.offContext.lineTo(400, 120)
-          this.offContext.stroke()
-
-          this.offContext.font = '20px sans-serif'
-
-          this.offContext.textBaseline = 'top'
-          this.offContext.fillText('Top', 10, 120)
-          this.offContext.textBaseline = 'bottom'
-          this.offContext.fillText('Bottom', 55, 120)
-          this.offContext.textBaseline = 'middle'
-          this.offContext.fillText('Middle', 125, 120)
-          this.offContext.textBaseline = 'alphabetic'
-          this.offContext.fillText('Alphabetic', 195, 120)
-          this.offContext.textBaseline = 'hanging'
-          this.offContext.fillText('Hanging', 295, 120)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.strokeStyle = '#0000ff'
+          offContext.moveTo(0, 120)
+          offContext.lineTo(400, 120)
+          offContext.stroke()
+
+          offContext.font = '20px sans-serif'
+
+          offContext.textBaseline = 'top'
+          offContext.fillText('Top', 10, 120)
+          offContext.textBaseline = 'bottom'
+          offContext.fillText('Bottom', 55, 120)
+          offContext.textBaseline = 'middle'
+          offContext.fillText('Middle', 125, 120)
+          offContext.textBaseline = 'alphabetic'
+          offContext.fillText('Alphabetic', 195, 120)
+          offContext.textBaseline = 'hanging'
+          offContext.fillText('Hanging', 295, 120)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -403,7 +475,7 @@ struct TextBaseline {
 struct GlobalAlpha {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -412,12 +484,13 @@ struct GlobalAlpha {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.fillStyle = 'rgb(0,0,255)'
-          this.offContext.fillRect(0, 0, 50, 50)
-          this.offContext.globalAlpha = 0.4
-          this.offContext.fillStyle = 'rgb(0,0,255)'
-          this.offContext.fillRect(50, 50, 50, 50)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = 'rgb(0,0,255)'
+          offContext.fillRect(0, 0, 50, 50)
+          offContext.globalAlpha = 0.4
+          offContext.fillStyle = 'rgb(0,0,255)'
+          offContext.fillRect(50, 50, 50, 50)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -439,7 +512,7 @@ struct GlobalAlpha {
 struct LineDashOffset {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -448,11 +521,12 @@ struct LineDashOffset {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.arc(100, 75, 50, 0, 6.28)
-          this.offContext.setLineDash([10,20])
-          this.offContext.lineDashOffset = 10.0
-          this.offContext.stroke()
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.arc(100, 75, 50, 0, 6.28)
+          offContext.setLineDash([10,20])
+          offContext.lineDashOffset = 10.0
+          offContext.stroke()
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -488,7 +562,7 @@ struct LineDashOffset {
 struct GlobalCompositeOperation {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -497,17 +571,18 @@ struct GlobalCompositeOperation {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(20, 20, 50, 50)
-          this.offContext.globalCompositeOperation = 'source-over'
-          this.offContext.fillStyle = 'rgb(0,0,255)'
-          this.offContext.fillRect(50, 50, 50, 50)
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(120, 20, 50, 50)
-          this.offContext.globalCompositeOperation = 'destination-over'
-          this.offContext.fillStyle = 'rgb(0,0,255)'
-          this.offContext.fillRect(150, 50, 50, 50)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(20, 20, 50, 50)
+          offContext.globalCompositeOperation = 'source-over'
+          offContext.fillStyle = 'rgb(0,0,255)'
+          offContext.fillRect(50, 50, 50, 50)
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(120, 20, 50, 50)
+          offContext.globalCompositeOperation = 'destination-over'
+          offContext.fillStyle = 'rgb(0,0,255)'
+          offContext.fillRect(150, 50, 50, 50)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -529,7 +604,7 @@ struct GlobalCompositeOperation {
 struct ShadowBlur {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -538,11 +613,12 @@ struct ShadowBlur {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.shadowBlur = 30
-          this.offContext.shadowColor = 'rgb(0,0,0)'
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(20, 20, 100, 80)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.shadowBlur = 30
+          offContext.shadowColor = 'rgb(0,0,0)'
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(20, 20, 100, 80)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -564,7 +640,7 @@ struct ShadowBlur {
 struct ShadowColor {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -573,11 +649,12 @@ struct ShadowColor {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.shadowBlur = 30
-          this.offContext.shadowColor = 'rgb(0,0,255)'
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(30, 30, 100, 100)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.shadowBlur = 30
+          offContext.shadowColor = 'rgb(0,0,255)'
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(30, 30, 100, 100)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -599,7 +676,7 @@ struct ShadowColor {
 struct ShadowOffsetX {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -608,12 +685,13 @@ struct ShadowOffsetX {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.shadowBlur = 10
-          this.offContext.shadowOffsetX = 20
-          this.offContext.shadowColor = 'rgb(0,0,0)'
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(20, 20, 100, 80)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.shadowBlur = 10
+          offContext.shadowOffsetX = 20
+          offContext.shadowColor = 'rgb(0,0,0)'
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(20, 20, 100, 80)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -635,7 +713,7 @@ struct ShadowOffsetX {
 struct ShadowOffsetY {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -644,12 +722,13 @@ struct ShadowOffsetY {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.shadowBlur = 10
-          this.offContext.shadowOffsetY = 20
-          this.offContext.shadowColor = 'rgb(0,0,0)'
-          this.offContext.fillStyle = 'rgb(255,0,0)'
-          this.offContext.fillRect(30, 30, 100, 100)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.shadowBlur = 10
+          offContext.shadowOffsetY = 20
+          offContext.shadowColor = 'rgb(0,0,0)'
+          offContext.fillStyle = 'rgb(255,0,0)'
+          offContext.fillRect(30, 30, 100, 100)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -672,7 +751,7 @@ struct ImageSmoothingEnabled {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -681,9 +760,10 @@ struct ImageSmoothingEnabled {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.imageSmoothingEnabled = false
-          this.offContext.drawImage( this.img,0,0,400,200)
-          var image = this.offContext.transferToImageBitmap()
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          offContext.imageSmoothingEnabled = false
+          offContext.drawImage(this.img,0,0,400,200)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
     }
@@ -725,7 +805,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct FillRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -734,8 +814,9 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.fillRect(30,30,100,100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillRect(30,30,100,100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
          })
         }
@@ -774,7 +855,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct StrokeRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -783,8 +864,9 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.strokeRect(30, 30, 200, 150)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.strokeRect(30, 30, 200, 150)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -823,7 +905,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct ClearRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -832,10 +914,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.fillStyle = 'rgb(0,0,255)'
-            this.offContext.fillRect(20,20,200,200)
-            this.offContext.clearRect(30,30,150,100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = 'rgb(0,0,255)'
+            offContext.fillRect(20,20,200,200)
+            offContext.clearRect(30,30,150,100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -874,7 +957,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct FillText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -883,9 +966,10 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.font = '30px sans-serif'
-            this.offContext.fillText("Hello World!", 20, 100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.font = '30px sans-serif'
+            offContext.fillText("Hello World!", 20, 100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -924,7 +1008,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct StrokeText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -933,9 +1017,10 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.font = '55px sans-serif'
-            this.offContext.strokeText("Hello World!", 20, 60)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.font = '55px sans-serif'
+            offContext.strokeText("Hello World!", 20, 60)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -995,7 +1080,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct MeasureText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1004,10 +1089,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.font = '50px sans-serif'
-            this.offContext.fillText("Hello World!", 20, 100)
-            this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.font = '50px sans-serif'
+            offContext.fillText("Hello World!", 20, 100)
+            offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -1043,7 +1129,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Stroke {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1052,13 +1138,14 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.moveTo(25, 25)
-            this.offContext.lineTo(25, 105)
-            this.offContext.lineTo(75, 105)
-            this.offContext.lineTo(75, 25)
-            this.offContext.strokeStyle = 'rgb(0,0,255)'
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.moveTo(25, 25)
+            offContext.lineTo(25, 105)
+            offContext.lineTo(75, 105)
+            offContext.lineTo(75, 25)
+            offContext.strokeStyle = 'rgb(0,0,255)'
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1088,7 +1175,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct BeginPath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1097,13 +1184,14 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.lineWidth = 6
-            this.offContext.strokeStyle = '#0000ff'
-            this.offContext.moveTo(15, 80)
-            this.offContext.lineTo(280, 160)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.lineWidth = 6
+            offContext.strokeStyle = '#0000ff'
+            offContext.moveTo(15, 80)
+            offContext.lineTo(280, 160)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1140,7 +1228,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct MoveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1149,11 +1237,12 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.moveTo(10, 10)
-            this.offContext.lineTo(280, 160)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.moveTo(10, 10)
+            offContext.lineTo(280, 160)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1190,7 +1279,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct LineTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1199,11 +1288,12 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.moveTo(10, 10)
-            this.offContext.lineTo(280, 160)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.moveTo(10, 10)
+            offContext.lineTo(280, 160)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1233,7 +1323,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct ClosePath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1242,13 +1332,14 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-              this.offContext.beginPath()
-              this.offContext.moveTo(30, 30)
-              this.offContext.lineTo(110, 30)
-              this.offContext.lineTo(70, 90)
-              this.offContext.closePath()
-              this.offContext.stroke()
-              var image = this.offContext.transferToImageBitmap()
+              var offContext = this.offCanvas.getContext("2d", this.settings)
+              offContext.beginPath()
+              offContext.moveTo(30, 30)
+              offContext.lineTo(110, 30)
+              offContext.lineTo(70, 90)
+              offContext.closePath()
+              offContext.stroke()
+              var image = this.offCanvas.transferToImageBitmap()
               this.context.transferFromImageBitmap(image)
           })
       }
@@ -1292,7 +1383,7 @@ Since API version 9, this API is supported in ArkTS widgets.
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1301,10 +1392,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var pattern = this.offContext.createPattern(this.img, 'repeat')
-            this.offContext.fillStyle = pattern
-            this.offContext.fillRect(0, 0, 200, 200)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var pattern = offContext.createPattern(this.img, 'repeat')
+            offContext.fillStyle = pattern
+            offContext.fillRect(0, 0, 200, 200)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1345,7 +1437,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct BezierCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1354,11 +1446,12 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.moveTo(10, 10)
-            this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.moveTo(10, 10)
+            offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1397,7 +1490,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct QuadraticCurveTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1406,11 +1499,12 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.moveTo(20, 20)
-            this.offContext.quadraticCurveTo(100, 100, 200, 20)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.moveTo(20, 20)
+            offContext.quadraticCurveTo(100, 100, 200, 20)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -1451,7 +1545,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Arc {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1460,10 +1554,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.arc(100, 75, 50, 0, 6.28)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.arc(100, 75, 50, 0, 6.28)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1503,7 +1598,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct ArcTo {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1512,10 +1607,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.moveTo(100, 20)
-            this.offContext.arcTo(150, 20, 150, 70, 50)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.moveTo(100, 20)
+            offContext.arcTo(150, 20, 150, 70, 50)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1558,7 +1654,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -1566,10 +1662,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath()
-            this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.beginPath()
+            offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1608,7 +1705,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1617,9 +1714,10 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1653,7 +1751,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Fill {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1662,9 +1760,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
-            this.offContext.fill()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = '#ffffff'
+            offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+            offContext.fill()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1700,7 +1800,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 struct Fill {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1709,6 +1809,7 @@ struct Fill {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
+          var offContext = this.offCanvas.getContext("2d", this.settings)
           let region = new Path2D()
           region.moveTo(30, 90)
           region.lineTo(110, 20)
@@ -1718,9 +1819,9 @@ struct Fill {
           region.lineTo(270, 90)
           region.closePath()
           // Fill path
-          this.offContext.fillStyle = '#00ff00'
-          this.offContext.fill(region, "evenodd")
-          var image = this.offContext.transferToImageBitmap()
+          offContext.fillStyle = '#00ff00'
+          offContext.fill(region, "evenodd")
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }
@@ -1757,7 +1858,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Clip {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1766,12 +1867,13 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rect(0, 0, 100, 200)
-            this.offContext.stroke()
-            this.offContext.clip()
-            this.offContext.fillStyle = "rgb(255,0,0)"
-            this.offContext.fillRect(0, 0, 200, 200)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.rect(0, 0, 100, 200)
+            offContext.stroke()
+            offContext.clip()
+            offContext.fillStyle = "rgb(255,0,0)"
+            offContext.fillRect(0, 0, 200, 200)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1806,7 +1908,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Clip {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1815,6 +1917,7 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             let region = new Path2D()
             region.moveTo(30, 90)
             region.lineTo(110, 20)
@@ -1823,10 +1926,10 @@ Since API version 9, this API is supported in ArkTS widgets.
             region.lineTo(190, 20)
             region.lineTo(270, 90)
             region.closePath()
-            this.offContext.clip(region,"evenodd")
-            this.offContext.fillStyle = "rgb(0,255,0)"
-            this.offContext.fillRect(0, 0, 600, 600)
-            var image = this.offContext.transferToImageBitmap()
+            offContext.clip(region,"evenodd")
+            offContext.fillStyle = "rgb(0,255,0)"
+            offContext.fillRect(0, 0, 600, 600)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1862,7 +1965,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct FilterDemoOff {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
 
     build() {
@@ -1872,7 +1975,8 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            let offctx = this.offContext
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            let offctx = offContext
             let img = this.img
 
             offctx.drawImage(img, 0, 0, 100, 100);
@@ -1904,7 +2008,7 @@ Since API version 9, this API is supported in ArkTS widgets.
             offctx.filter = 'blur(5px)';
             offctx.drawImage(img, 0, 300, 100, 100);
 
-            var image = offctx.transferToImageBitmap()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1917,20 +2021,6 @@ Since API version 9, this API is supported in ArkTS widgets.
 ![filterDemo](figures/filterDemo.jpeg)
 
 
-### getTransform
-
-getTransform(): Matrix2D
-
-Obtains the current transformation matrix being applied to the context. This API is a void API.
-
-Since API version 9, this API is supported in ArkTS widgets.
-
-**Return value**
-
-| Type                                      | Description   |
-| ---------------------------------------- | ----- |
-| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.|
-
 ### resetTransform
 
 resetTransform(): void
@@ -1956,7 +2046,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct DirectionDemoOff {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1965,7 +2055,8 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            let offctx = this.offContext
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            let offctx = offContext
             offctx.font = '48px serif';
             offctx.textAlign = 'start'
             offctx.fillText("Hi ltr!", 200, 50);
@@ -2010,7 +2101,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Rotate {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2019,9 +2110,10 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rotate(45 * Math.PI / 180)
-            this.offContext.fillRect(70, 20, 50, 50)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.rotate(45 * Math.PI / 180)
+            offContext.fillRect(70, 20, 50, 50)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2058,7 +2150,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Scale {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2067,11 +2159,12 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.lineWidth = 3
-            this.offContext.strokeRect(30, 30, 50, 50)
-            this.offContext.scale(2, 2) // Scale to 200%
-            this.offContext.strokeRect(30, 30, 50, 50)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.lineWidth = 3
+            offContext.strokeRect(30, 30, 50, 50)
+            offContext.scale(2, 2) // Scale to 200%
+            offContext.strokeRect(30, 30, 50, 50)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2119,7 +2212,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Transform {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2128,15 +2221,16 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.fillStyle = 'rgb(0,0,0)'
-            this.offContext.fillRect(0, 0, 100, 100)
-            this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
-            this.offContext.fillStyle = 'rgb(255,0,0)'
-            this.offContext.fillRect(0, 0, 100, 100)
-            this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
-            this.offContext.fillStyle = 'rgb(0,0,255)'
-            this.offContext.fillRect(0, 0, 100, 100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = 'rgb(0,0,0)'
+            offContext.fillRect(0, 0, 100, 100)
+            offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+            offContext.fillStyle = 'rgb(255,0,0)'
+            offContext.fillRect(0, 0, 100, 100)
+            offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+            offContext.fillStyle = 'rgb(0,0,255)'
+            offContext.fillRect(0, 0, 100, 100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2177,7 +2271,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct SetTransform {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2186,12 +2280,13 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.fillStyle = 'rgb(255,0,0)'
-            this.offContext.fillRect(0, 0, 100, 100)
-            this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
-            this.offContext.fillStyle = 'rgb(0,0,255)'
-            this.offContext.fillRect(0, 0, 100, 100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillStyle = 'rgb(255,0,0)'
+            offContext.fillRect(0, 0, 100, 100)
+            offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
+            offContext.fillStyle = 'rgb(0,0,255)'
+            offContext.fillRect(0, 0, 100, 100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2204,6 +2299,86 @@ Since API version 9, this API is supported in ArkTS widgets.
   ![en-us_image_0000001193872526](figures/en-us_image_0000001193872526.png)
 
 
+### setTransform
+
+setTransform(transform?: Matrix2D): void
+
+Resets the current transformation and creates a new transformation matrix based on the specified **Matrix2D** object.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Parameters**
+
+| Name   | Type                                      | Mandatory  | Default Value | Description   |
+| --------- | ---------------------------------------- | ---- | ---- | ----- |
+| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No   | null | Matrix object. |
+
+### getTransform
+
+getTransform(): Matrix2D
+
+Obtains the current transformation matrix being applied to the context.
+
+Since API version 9, this API is supported in ArkTS widgets.
+
+**Return value**
+
+| Type                                      | Description   |
+| ---------------------------------------- | ----- |
+| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | Matrix object.|
+
+**Example**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct TransFormDemo {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private offcontext1: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings);
+    private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private offcontext2: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 100, this.settings);
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Text('context1');
+        Canvas(this.context1)
+          .width('230vp')
+          .height('120vp')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.offcontext1.fillRect(50, 50, 50, 50);
+            this.offcontext1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25);
+            this.offcontext1.fillRect(50, 50, 50, 50);
+            var image = this.offcontext1.transferToImageBitmap();
+            this.context1.transferFromImageBitmap(image);
+          })
+        Text('context2');
+        Canvas(this.context2)
+          .width('230vp')
+          .height('120vp')
+          .backgroundColor('#0ffff0')
+          .onReady(() =>{
+            this.offcontext2.fillRect(50, 50, 50, 50);
+            let storedTransform = this.offcontext1.getTransform();
+            console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY +
+            ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY +
+            ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]")
+            this.offcontext2.setTransform(storedTransform);
+            this.offcontext2.fillRect(50,50,50,50);
+            var image = this.offcontext2.transferToImageBitmap();
+            this.context2.transferFromImageBitmap(image);
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![en-us_image_0000001219982726.png](figures/en-us_image_0000001219982726.png)
+
 ### translate
 
 translate(x: number, y: number): void
@@ -2228,7 +2403,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct Translate {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2237,10 +2412,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.fillRect(10, 10, 50, 50)
-            this.offContext.translate(70, 70)
-            this.offContext.fillRect(10, 10, 50, 50)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.fillRect(10, 10, 50, 50)
+            offContext.translate(70, 70)
+            offContext.fillRect(10, 10, 50, 50)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2290,7 +2466,7 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2298,8 +2474,9 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() => {
-            this.offContext.drawImage( this.img,0,0,400,200)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.drawImage( this.img,0,0,400,200)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -2422,7 +2599,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct GetImageData {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
     build() {
@@ -2432,10 +2609,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.drawImage(this.img,0,0,130,130)
-            var imagedata = this.offContext.getImageData(50,50,130,130)
-            this.offContext.putImageData(imagedata,150,150)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.drawImage(this.img,0,0,130,130)
+            var imagedata = offContext.getImageData(50,50,130,130)
+            offContext.putImageData(imagedata,150,150)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2479,7 +2657,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct PutImageData {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2487,15 +2665,16 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var imageData = this.offContext.createImageData(100, 100)
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var imageData = offContext.createImageData(100, 100)
             for (var i = 0; i < imageData.data.length; i += 4) {
               imageData.data[i + 0] = 255
               imageData.data[i + 1] = 0
               imageData.data[i + 2] = 255
               imageData.data[i + 3] = 255
             }
-            this.offContext.putImageData(imageData, 10, 10)
-            var image = this.offContext.transferToImageBitmap()
+            offContext.putImageData(imageData, 10, 10)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2529,7 +2708,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct SetLineDash {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2538,10 +2717,11 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.arc(100, 75, 50, 0, 6.28)
-            this.offContext.setLineDash([10,20])
-            this.offContext.stroke()
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.arc(100, 75, 50, 0, 6.28)
+            offContext.setLineDash([10,20])
+            offContext.stroke()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
       }
@@ -2577,7 +2757,7 @@ Since API version 9, this API is supported in ArkTS widgets.
     @State message: string = 'Hello World'
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     build() {
       Row() {
         Column() {
@@ -2586,7 +2766,8 @@ Since API version 9, this API is supported in ArkTS widgets.
             .fontWeight(FontWeight.Bold)
             .onClick(()=>{
               console.error('before getlinedash clicked')
-              let res = this.offContext.getLineDash()
+              var offContext = this.offCanvas.getContext("2d", this.settings)
+              let res = offContext.getLineDash()
               console.error(JSON.stringify(res))
             })
           Canvas(this.context)
@@ -2594,11 +2775,12 @@ Since API version 9, this API is supported in ArkTS widgets.
             .height('100%')
             .backgroundColor('#ffff00')
             .onReady(() => {
-              this.offContext.arc(100, 75, 50, 0, 6.28)
-              this.offContext.setLineDash([10,20])
-              this.offContext.stroke()
-              let res = this.offContext.getLineDash()
-              var image = this.offContext.transferToImageBitmap()
+              var offContext = this.offCanvas.getContext("2d", this.settings)
+              offContext.arc(100, 75, 50, 0, 6.28)
+              offContext.setLineDash([10,20])
+              offContext.stroke()
+              let res = offContext.getLineDash()
+              var image = this.offCanvas.transferToImageBitmap()
               this.context.transferFromImageBitmap(image)
             })
         }
@@ -2642,7 +2824,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct ToDataURL {
       private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-      private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+      private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2651,7 +2833,8 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var dataURL = this.offContext.toDataURL()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var dataURL = offContext.toDataURL()
           })
       }
       .width('100%')
@@ -2683,7 +2866,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct ImageSmoothingQualityDemoOff {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
 
     build() {
@@ -2693,12 +2876,13 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            let offctx = this.offContext
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            let offctx = offContext
             offctx.imageSmoothingEnabled = true
             offctx.imageSmoothingQuality = 'high'
             offctx.drawImage(this.img, 0, 0, 400, 200)
 
-            var image = offctx.transferToImageBitmap()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2732,7 +2916,7 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
   struct PutImageData {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2741,15 +2925,16 @@ Creates an **ImageBitmap** object on the most recently rendered image of the **O
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var imageData = this.offContext.createImageData(100, 100)
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var imageData = offContext.createImageData(100, 100)
             for (var i = 0; i < imageData.data.length; i += 4) {
               imageData.data[i + 0] = 255
               imageData.data[i + 1] = 0
               imageData.data[i + 2] = 255
               imageData.data[i + 3] = 255
             }
-            this.offContext.putImageData(imageData, 10, 10)
-            var image = this.offContext.transferToImageBitmap()
+            offContext.putImageData(imageData, 10, 10)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2777,7 +2962,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2786,12 +2971,13 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.save() // save the default state
-            this.offContext.fillStyle = "#00ff00"
-            this.offContext.fillRect(20, 20, 100, 100)
-            this.offContext.restore() // restore to the default state
-            this.offContext.fillRect(150, 75, 100, 100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.save() // save the default state
+            offContext.fillStyle = "#00ff00"
+            offContext.fillRect(20, 20, 100, 100)
+            offContext.restore() // restore to the default state
+            offContext.fillRect(150, 75, 100, 100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2820,7 +3006,7 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2829,12 +3015,13 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.save() // save the default state
-            this.offContext.fillStyle = "#00ff00"
-            this.offContext.fillRect(20, 20, 100, 100)
-            this.offContext.restore() // restore to the default state
-            this.offContext.fillRect(150, 75, 100, 100)
-            var image = this.offContext.transferToImageBitmap()
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            offContext.save() // save the default state
+            offContext.fillStyle = "#00ff00"
+            offContext.fillRect(20, 20, 100, 100)
+            offContext.restore() // restore to the default state
+            offContext.fillRect(150, 75, 100, 100)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2872,8 +3059,8 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CreateLinearGradient {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2881,13 +3068,14 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var grad = this.offContext.createLinearGradient(50,0, 300,100)
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var grad = offContext.createLinearGradient(50,0, 300,100)
             grad.addColorStop(0.0, '#ff0000')
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
-            this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 400, 400)
-            var image = this.offContext.transferToImageBitmap()
+            offContext.fillStyle = grad
+            offContext.fillRect(0, 0, 400, 400)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2928,8 +3116,8 @@ Since API version 9, this API is supported in ArkTS widgets.
   struct CreateRadialGradient {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
     
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2937,13 +3125,14 @@ Since API version 9, this API is supported in ArkTS widgets.
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
+            var offContext = this.offCanvas.getContext("2d", this.settings)
+            var grad = offContext.createRadialGradient(200,200,50, 200,200,200)
             grad.addColorStop(0.0, '#ff0000')
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
-            this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 440, 440)
-            var image = this.offContext.transferToImageBitmap()
+            offContext.fillStyle = grad
+            offContext.fillRect(0, 0, 440, 440)
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -2978,8 +3167,7 @@ Creates a conic gradient.
 struct OffscreenCanvasConicGradientPage {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
-  private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2988,13 +3176,14 @@ struct OffscreenCanvasConicGradientPage {
         .height('100%')
         .backgroundColor('#ffffff')
         .onReady(() =>{
-          var grad = this.offContext.createConicGradient(0, 50, 80)
+          var offContext = this.offCanvas.getContext("2d", this.settings)
+          var grad = offContext.createConicGradient(0, 50, 80)
           grad.addColorStop(0.0, '#ff0000')
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')
-          this.offContext.fillStyle = grad
-          this.offContext.fillRect(0, 30, 100, 100)
-          var image = this.offContext.transferToImageBitmap()
+          offContext.fillStyle = grad
+          offContext.fillRect(0, 30, 100, 100)
+          var image = this.offCanvas.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
     }

en/application-dev/reference/arkui-ts/ts-page-transition-animation.md

@@ -10,8 +10,8 @@ You can customize the page entrance and exit animations in the **pageTransition*
 
 | Name               | Parameter                                                        | Mandatory| Description                                                    |
 | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No  | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
-| PageTransitionExit  | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No  | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
+| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No  | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
+| PageTransitionExit  | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No  | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
 
 ## RouteType
 

en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md

@@ -12,7 +12,7 @@ A shared element transition is a transition animation applied to a component tha
 
 | Name            | Parameter                                                        | Description                                                    |
 | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
+| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.<br>- **curve**: animation curve. The default curve is **Curve.Linear**.<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
 
 
 ## Example

en/application-dev/ui/arkts-drawing-customization-on-canvas.md

@@ -53,8 +53,8 @@ You can draw custom graphics on the canvas in any of the following ways:
   // Configure the parameters of the CanvasRenderingContext2D and OffscreenCanvasRenderingContext2D objects, including whether to enable anti-aliasing. The value true indicates that anti-aliasing is enabled.
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  // Create an OffscreenCanvasRenderingContext2D object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas.
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  // Create an OffscreenCanvas object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas.
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
    
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -63,10 +63,11 @@ You can draw custom graphics on the canvas in any of the following ways:
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             // You can draw content here.
-            this.offContext.strokeRect(50, 50, 200, 150);
+            offContext.strokeRect(50, 50, 200, 150);
             // Display the image rendered by the offscreen drawing value on the common canvas.
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }
@@ -113,7 +114,7 @@ Canvas(this.context)
 
 ## Canvas Component Drawing Modes
 
-Two modes are available for drawing with the **Canvas** component:
+Two modes are available for drawing with the **Canvas** component:  
 
 - After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
 
@@ -154,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
 **OffscreenCanvasRenderingContext2D** and **CanvasRenderingContext2D** provide a large number of attributes and methods, which can be used to draw text and graphics and process pixels. They are the core of the **Canvas** component. Common APIs include [fill](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#fill), [clip](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#clip), and [stroke](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroke). In addition, [fillStyle](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#fillstyle), [globalAlpha](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#globalalpha), [strokeStyle](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#strokestyle), and more attributes are provided to spruce up the graphics. This topic describes typical usage of the canvas.
 
 - Draw a basic shape.
-  
   You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
-  
+
   ```ts
   Canvas(this.context)
     .width('100%')
@@ -175,12 +175,12 @@ Two modes are available for drawing with the **Canvas** component:
        this.context.beginPath();
        this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
        this.context.stroke();
-  })
-  
+    })
+
   ```
-  
-![2023022794521(1)](figures/2023022794521(1).jpg)
-  
+
+  ![2023022794521(1)](figures/2023022794521(1).jpg)
+
 - Draw text.
 
   You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
@@ -212,7 +212,7 @@ Two modes are available for drawing with the **Canvas** component:
   struct GetImageData {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+   private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
    private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
     build() {
@@ -222,14 +222,15 @@ Two modes are available for drawing with the **Canvas** component:
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             // Use the drawImage API to draw an image in the area with the width and height of 130 starting from (0, 0).
-            this.offContext.drawImage(this.img,0,0,130,130);
+            offContext.drawImage(this.img,0,0,130,130);
             // Use the getImageData API to obtain the image data with the width and height of 130 starting from (50, 50).
-            let imagedata = this.offContext.getImageData(50,50,130,130);
+            let imagedata = offContext.getImageData(50,50,130,130);
             // Use the putImageData API to draw the obtained image data in the area starting from (150, 150).
-            this.offContext.putImageData(imagedata,150,150);
+            offContext.putImageData(imagedata,150,150);
             // Draw the offscreen drawing content to the canvas.
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }