diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 83b31626aa2cd63a86b4dbc2c71a8d1322b19c1c..c945aa1bf7e4d614c321eeeb0d996db9a57dd6c2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1577,7 +1577,7 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   @Component
   struct Transform {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: RenderingContext = new RenderingContext(this.settings)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1926,9 +1926,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createLinearGradient(50,0, 300,100)
-            this.grad.addColorStop(0.0, 'red')
-            this.grad.addColorStop(0.5, 'white')
-            this.grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, 'red')
+            grad.addColorStop(0.5, 'white')
+            grad.addColorStop(1.0, 'green')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
@@ -1974,9 +1974,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-            this.grad.addColorStop(0.0, 'red')
-            this.grad.addColorStop(0.5, 'white')
-            this.grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, 'red')
+            grad.addColorStop(0.5, 'white')
+            grad.addColorStop(1.0, 'green')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 95d3ab05e222f3675b0412969ccab5be988b5352..7a2decde903a27a4cea908c2a7a75c5d5c6b1239 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -2037,9 +2037,9 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createLinearGradient(50,0, 300,100)
-            this.grad.addColorStop(0.0, 'red')
-            this.grad.addColorStop(0.5, 'white')
-            this.grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, 'red')
+            grad.addColorStop(0.5, 'white')
+            grad.addColorStop(1.0, 'green')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()
@@ -2088,9 +2088,9 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-            this.grad.addColorStop(0.0, 'red')
-            this.grad.addColorStop(0.5, 'white')
-            this.grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, 'red')
+            grad.addColorStop(0.5, 'white')
+            grad.addColorStop(1.0, 'green')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()