diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152610806.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152610806.png
index b3a47a84d8086ca0806bc958f745f29821c47cc2..30ab31575654579e9a00a64d3d67f7420662f203 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152610806.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001152610806.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214619417.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214619417.png
index 5da42e3e14d601745274cb62d914c6600620bb25..4f6c19892155444ecf63dab3ca80575a8046cc1b 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214619417.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214619417.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214704759.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214704759.png
index 6afdd1b39e4bcb3664c7664a55b47b8537f4aeaa..0b4837fc44abc0e1005de3d1259ed924f2969806 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214704759.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214704759.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214811029.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214811029.png
index 1d71cee4618f1f2822cea1031c9b0e5d602e0a9b..447e5b819bdddc57b98ccf7629d612eb499aec8b 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214811029.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001214811029.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
index 6f6a7992c56adb2b92150507c88dceefc647f313..807122809834e844ae1f2ded1c70f49141b7514a 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
@@ -25,19 +25,21 @@ addColorStop(offset: number, color: string): void
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  <input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
 </div>
   ```
 
   ```js
 // xxx.js
 export default {
-  handleClick() {
+  onShow() {
     const el =this.$refs.canvas;
-    const ctx =el.getContext('2d');
-    const gradient = ctx.createLinearGradient(0,0,100,0);
-    gradient.addColorStop(0,'#00ffff');
-    gradient.addColorStop(1,'#ffff00');
+    const ctx = el.getContext('2d');
+    const gradient = ctx.createLinearGradient(50,0,300,100);
+    gradient.addColorStop(0.0, 'red')
+    gradient.addColorStop(0.5, 'white')
+    gradient.addColorStop(1.0, 'green')
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, 300, 300)
   }
 }
   ```
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index fa2d921d02097ffda89f80b016ab3b7f5661b0bc..ecae9a9fba09726ebf36874ae86605c0c9eea964 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -584,7 +584,7 @@ fillRect(x: number, y: number, width:number, height: number): void
 ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
   </div>
 ```
 
@@ -620,7 +620,7 @@ clearRect(x: number, y: number, width:number, height: number): void
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
   </div>
   ```
 
@@ -983,7 +983,7 @@ createPattern(image: Image, repetition: string): Object
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
+    <canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas>
   </div>
   ```
 
@@ -997,7 +997,7 @@ createPattern(image: Image, repetition: string): Object
       img.src = 'common/images/example.jpg';
       var pat = ctx.createPattern(img, 'repeat');
       ctx.fillStyle = pat;
-      ctx.fillRect(0, 0, 20, 20);
+      ctx.fillRect(0, 0, 500, 500);
     }
   }
   ```
@@ -1573,7 +1573,7 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
   </div>
   ```
 
@@ -1581,11 +1581,11 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
   //xxx.js
   export default {
     onShow() {
-      var test = this.$element('drawImage');
+      var test = this.$refs.canvas;
       var ctx = test.getContext('2d');
       var img = new Image();
       img.src = 'common/image/test.jpg';
-      ctx.drawImage(img, 50, 80, 80, 80);
+      ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
     }
   }
   ```
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md
index e09ea90de9b7d96609d7ea9430c64dfbbcecb2f1..9e1edeb0c09f9f23b7f078b2bd0aa5e7dcc5fe44 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md
@@ -65,7 +65,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -96,7 +96,7 @@ closePath(): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -224,7 +224,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -265,7 +265,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -308,7 +308,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -349,7 +349,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
diff --git a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index 890e8e08f9d68ad387547f9cc37e3d61b334bb45..f6807fbb67924a99dbe3103c5e762587c2fd3b7f 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -18,7 +18,7 @@
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
 ```
@@ -94,7 +94,7 @@ isPointInPath(path?: Path2D, x: number, y: number): boolean
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
@@ -144,7 +144,7 @@ isPointInStroke(path?: Path2D, x: number, y: number): boolean
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
@@ -180,7 +180,7 @@ resetTransform(): void
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
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 d93f1e3aff2614ef0662a3ac91cf528835f750e3..66adc3e73e3083a309db834bd5b0db9795e8df4b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1745,7 +1745,7 @@ rotate(angle: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.context.rotate(45 * Math.PI / 180)
             this.context.fillRect(70, 20, 50, 50)
           })
       }
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 f243c3342ad7ee14e6d77fece525d2c149cd1e78..a6e2d28cb802e7bfe22f90fb8fc3bcaa368f0007 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1850,7 +1850,7 @@ rotate(angle: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.offContext.rotate(45 * Math.PI / 180)
             this.offContext.fillRect(70, 20, 50, 50)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)