!14837 Canvas js文档整改-3.1release

Merge pull request !14837 from lanyi/lanyi_canvas_release1

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 {

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);