diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167001464.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167001464.png
index 5113bc6bad4f88bc2558aae304394e00e107ce88..8f997a0b5c76b206acacaf8f689e55f73bbaf20a 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167001464.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001167001464.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001178875308.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001178875308.png
index c085790c6651bf041b772f58f5665d442caf6f4a..ff15fe644562b95b868829af17e7be0068097a75 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001178875308.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001178875308.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179035242.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179035242.png
index c7311ac9226ca3c0a04cef9a51961424daf8a47a..2c2f496c7af6589057af1ed24d69f22dc8b7e2d2 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179035242.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001179035242.png differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224354967.png b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224354967.png
index 7469c1e329fc86f0ca7eec9374be7c2c03ae2d6b..ad3d9f57521f89bdcbab75649447319bee650fa1 100644
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224354967.png and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001224354967.png differ
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 35bf025b6c8e9970c6df66f761f0b412b44df9c9..156e25ada8d9d814ecad59828e31c64ba6ca00a7 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -97,12 +97,36 @@ isPointInPath(path?: Path2D, x: number, y: number): boolean
 - 示例
   ```
   <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <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>
   ```
 
+  ```
+  /* 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;
+  }
+  ```
+
   ```
   // xxx.js
   export default {
@@ -149,12 +173,36 @@ isPointInStroke(path?: Path2D, x: number, y: number): boolean
 - 示例
   ```
   <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <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>
   ```
 
+  ```
+  /* 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;
+  }
+  ```
+
   ```
   // xxx.js
   export default {
@@ -186,12 +234,36 @@ resetTransform(): void
 - 示例
   ```
   <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <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>
   ```
 
+  ```
+  /* 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;
+  }
+  ```
+  
   ```
   //xxx.js
   export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md
index 9c8dceb0583d195a691563de306d947b72b1b565..19b0d3cc4b660d6ef21179311a18d4b88b7e2259 100644
--- a/zh-cn/application-dev/ui/ui-js-components-path2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md
@@ -56,7 +56,7 @@ export default {
     path.closePath();
     // 门
     path.moveTo(250, 450);
-    path.rect(250, 450, 350, 600);
+    path.rect(250, 450, 100, 600);
     path.closePath();
     // 烟囱
     path.moveTo(365, 250);