!20636 【ace_engine_standard部件】OffScreenCanvas接口增强例子代码

Merge pull request !20636 from limeng/OffscreenCanvas

zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -61,7 +61,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: Rend
 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 @@ fillRect(x: number, y: number, w: number, h: number): void
   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 @@ fillRect(x: number, y: number, w: number, h: number): void
           .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 @@ strokeRect(x: number, y: number, w: number, h: number): void
   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 @@ strokeRect(x: number, y: number, w: number, h: number): void
           .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 @@ clearRect(x: number, y: number, w: number, h: number): void
   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 @@ clearRect(x: number, y: number, w: number, h: number): void
           .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 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
   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 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
           .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 @@ strokeText(text: string, x: number, y: number): void
   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 @@ strokeText(text: string, x: number, y: number): void
           .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 @@ measureText(text: string): TextMetrics
   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 @@ measureText(text: string): TextMetrics
           .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 @@ stroke(path?: Path2D): void
   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 @@ stroke(path?: Path2D): void
           .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 @@ beginPath(): void
   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 @@ beginPath(): void
           .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 @@ moveTo(x: number, y: number): void
   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 @@ moveTo(x: number, y: number): void
           .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 @@ lineTo(x: number, y: number): void
   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 @@ lineTo(x: number, y: number): void
           .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 @@ closePath(): void
   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 @@ closePath(): void
           .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 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
     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 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
           .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 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   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 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
           .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 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   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 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
           .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 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   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 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
           .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 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   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 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
           .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 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   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 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
           .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 @@ rect(x: number, y: number, w: number, h: number): void
   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 @@ rect(x: number, y: number, w: number, h: number): void
           .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 @@ fill(fillRule?: CanvasFillRule): void
   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 @@ fill(fillRule?: CanvasFillRule): void
           .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 @@ fill(path: Path2D, fillRule?: CanvasFillRule): void
 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 @@ clip(fillRule?: CanvasFillRule): void
   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 @@ clip(fillRule?: CanvasFillRule): void
           .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 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
   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 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
           .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 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
             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 @@ filter(filter: string): void
   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 @@ filter(filter: string): void
           .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 @@ filter(filter: string): void
             offctx.filter = 'blur(5px)';
             offctx.drawImage(img, 0, 300, 100, 100);
 
-            var image = offctx.transferToImageBitmap()
+            var image = this.offCanvas.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
       }
@@ -1956,7 +2060,7 @@ direction(direction: CanvasDirection): void
   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 +2069,8 @@ direction(direction: CanvasDirection): void
           .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 +2115,7 @@ rotate(angle: number): void
   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 +2124,10 @@ rotate(angle: number): void
           .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 +2164,7 @@ scale(x: number, y: number): void
   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 +2173,12 @@ scale(x: number, y: number): void
           .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 +2226,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   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 +2235,16 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
           .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 +2285,7 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
   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 +2294,13 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
           .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)
           })
       }
@@ -2228,7 +2337,7 @@ translate(x: number, y: number): void
   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 +2346,11 @@ translate(x: number, y: number): void
           .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 +2400,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
     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 +2408,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
         .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 +2533,7 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
   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 +2543,11 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
           .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 +2591,7 @@ putImageData(imageData: Object, dx: number | string, dy: number | string, dirtyX
   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 +2599,16 @@ putImageData(imageData: Object, dx: number | string, dy: number | string, dirtyX
           .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 +2642,7 @@ setLineDash(segments: number[]): void
   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 +2651,11 @@ setLineDash(segments: number[]): void
           .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 +2691,7 @@ getLineDash(): number[]
     @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 +2700,8 @@ getLineDash(): number[]
             .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 +2709,12 @@ getLineDash(): number[]
             .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 +2758,7 @@ toDataURL(type?: string, quality?: number): string
   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 +2767,8 @@ toDataURL(type?: string, quality?: number): string
           .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 +2800,7 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
   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 +2810,13 @@ imageSmoothingQuality(quality: imageSmoothingQuality)
           .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 +2850,7 @@ transferToImageBitmap(): ImageBitmap
   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 +2859,16 @@ transferToImageBitmap(): ImageBitmap
           .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 +2896,7 @@ restore(): void
   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 +2905,13 @@ restore(): void
           .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 +2940,7 @@ save(): void
   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 +2949,13 @@ save(): void
           .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 +2993,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
   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 +3002,14 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .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 +3050,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   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 +3059,14 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .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 +3101,7 @@ createConicGradient(startAngle: number, x: number, y: number): CanvasGradient
 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 +3110,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)
         })
     }

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

@@ -53,8 +53,8 @@ Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRe
   //用来配置CanvasRenderingContext2D对象和OffscreenCanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。true表明开启抗锯齿
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  //用来创建OffscreenCanvasRenderingContext2D对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  //用来创建OffscreenCanvas对象，width为离屏画布的宽度，height为离屏画布的高度。通过在canvas中调用OffscreenCanvasRenderingContext2D对象来绘制。
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
    
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -63,10 +63,11 @@ Canvas提供画布组件，用于自定义绘制图形，开发者使用CanvasRe
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             //可以在这里绘制内容
-            this.offContext.strokeRect(50, 50, 200, 150);
+            offContext.strokeRect(50, 50, 200, 150);
             //将离屏绘值渲染的图像在普通画布上显示
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }
@@ -211,7 +212,7 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供
   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() {
@@ -221,14 +222,15 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             // 使用drawImage接口将图片画在（0，0）为起点，宽高130的区域
-            this.offContext.drawImage(this.img,0,0,130,130);
+            offContext.drawImage(this.img,0,0,130,130);
             // 使用getImageData接口，获得canvas组件区域中，（50，50）为起点，宽高130范围内的绘制内容
-            let imagedata = this.offContext.getImageData(50,50,130,130);
+            let imagedata = offContext.getImageData(50,50,130,130);
             // 使用putImageData接口将得到的ImageData画在起点为（150， 150）的区域中
-            this.offContext.putImageData(imagedata,150,150);
+            offContext.putImageData(imagedata,150,150);
             // 将离屏绘制的内容画到canvas组件上
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }
@@ -344,4 +346,4 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供
 
 使用画布绘制自定义图形，有以下相关实例可供参考：
 
-- [Lottie动画](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie)
+- [Lottie动画](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie)
\ No newline at end of file