!15494 翻译完成 14803：docs同步OHOS 3

Merge pull request !15494 from ester.zhou/TR-14803

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>
   ```
 

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 {

en/application-dev/ui/ui-js-components-path2d.md

@@ -60,7 +60,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);