diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png
index 5113bc6bad4f88bc2558aae304394e00e107ce88..8f997a0b5c76b206acacaf8f689e55f73bbaf20a 100644
Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001167001464.png differ
diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png
index c085790c6651bf041b772f58f5665d442caf6f4a..ff15fe644562b95b868829af17e7be0068097a75 100644
Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001178875308.png differ
diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png
index c7311ac9226ca3c0a04cef9a51961424daf8a47a..2c2f496c7af6589057af1ed24d69f22dc8b7e2d2 100644
Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001179035242.png differ
diff --git a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png
index 7469c1e329fc86f0ca7eec9374be7c2c03ae2d6b..ad3d9f57521f89bdcbab75649447319bee650fa1 100644
Binary files a/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png and b/en/application-dev/reference/arkui-js/figures/en-us_image_0000001224354967.png differ
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index 8df65d142a4129699c45f44b69c1c5f1fbe96829..ceefb977f290e2f59c5234c8e2eb99b61f0b9cd2 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -585,7 +585,7 @@ Fills a rectangle on the canvas.
 ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
   </div>
 ```
 
@@ -621,7 +621,7 @@ Clears the content in a rectangle on the canvas.
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
   </div>
   ```
 
@@ -1735,9 +1735,9 @@ Creates a radial gradient and returns a **CanvasGradient** object.
       // Radial gradient: inner circle(200,200,r:50) outer circle(200,200,r:200)
       var gradient = ctx.createRadialGradient(200,200,50, 200,200,200);
       // Add three color stops
-      gradient.addColorStop(0.0, 'red');
-      gradient.addColorStop(0.5, 'white');
-      gradient.addColorStop(1.0, 'green');
+      gradient.addColorStop(0.0, '#ff0000');
+      gradient.addColorStop(0.5, '#ffffff');
+      gradient.addColorStop(1.0, '#00ff00');
       // Set the fill style and draw a rectangle
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, 500, 500);
diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index 8eebde2cacb7dc2e2409a8c1f6a8274ac4e38390..4a5af8ca23f34f15e617c39f9a23b2024155b7d0 100644
--- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -95,12 +95,36 @@ Checks whether a specified point is in the path area.
 **Example**
 ```html
 <!-- xxx.hml -->
-<div style="width: 500px; height: 500px;">
-  <text>In path:{{textValue}}</text>
-  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In path:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
 ```
 
+```css
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
 ```js
 // xxx.js
 export default {
@@ -145,12 +169,36 @@ Checks whether a specified point is on the edge line of a path.
 **Example**
 ```html
 <!-- xxx.hml -->
-<div style="width: 500px; height: 500px;">
-  <text>In path:{{textValue}}</text>
-  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In stroke:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
 ```
 
+```css
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
 ```js
 // xxx.js
 export default {
@@ -181,12 +229,36 @@ resetTransform(): void
 **Example**
 ```html
 <!-- xxx.hml -->
-<div style="width: 500px; height: 500px;">
-  <text>In path:{{textValue}}</text>
-  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In path:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
 ```
 
+```css
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
 ```js
 // xxx.js
 export default {
diff --git a/en/application-dev/ui/ui-js-components-path2d.md b/en/application-dev/ui/ui-js-components-path2d.md
index 1684f70db7739dbfc6cfe68344a8b3972fad2d37..b6455c4ff2905c2a93e6ba6efffd7360a3872010 100644
--- a/en/application-dev/ui/ui-js-components-path2d.md
+++ b/en/application-dev/ui/ui-js-components-path2d.md
@@ -36,8 +36,6 @@ canvas {
 
 ```js
 // xxx.js
-import promptAction from '@ohos.promptAction';
-
 export default {
     onShow() {
         let ctx = this.$refs.canvas.getContext('2d', {
@@ -60,7 +58,7 @@ export default {
         path.closePath();
         // Door
         path.moveTo(250, 450);
-        path.rect(250, 450, 350, 600);
+        path.rect(250, 450, 100, 600);
         path.closePath();
         // Chimney
         path.moveTo(365, 250);
@@ -139,8 +137,6 @@ text {
 
 ```js
 // xxx.js
-import promptAction from '@ohos.promptAction';
-
 export default {
     data: {
         ctx: null,