Refactor: update engine and canvas doc (#2529)

* refactor: update engine and canvas doc

docs/en/core/canvas.md

@@ -5,11 +5,7 @@ group: Basics
 label: Core
 ---
 
-Galacean Engine encapsulates canvases for different platforms, such as [WebCanvas](/en/apis/rhi-webgl/#WebCanvas) which supports using [Engine](/en/apis/core/#Engine) to control [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) or [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas).
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*ZC9gRY-KCTgAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-> Unless otherwise specified, the canvas in the documentation generally refers to `WebCanvas`.
+The engine encapsulates canvases for different platforms, such as [WebCanvas](/apis/rhi-webgl/#WebCanvas), allowing [Engine](/apis/core/#Engine) to control [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) or [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas). Unless otherwise specified, canvases in the documentation generally refer to `WebCanvas`.
 
 ## Basic Usage
 
@@ -21,9 +17,9 @@ Insert a `<canvas>` tag in HTML and specify an id:
 <canvas id="canvas" style="width: 500px; height: 500px" />
 ```
 
-> Developers should check the height and width of the canvas to avoid rendering issues caused by a height or width value of **0**.
+> Developers should check the height and width of the canvas to avoid rendering issues caused by values of **0**.
 
-When creating an instance of WebGLEngine, a WebCanvas instance is automatically created. The parameter `canvas` is the `id` of the _Canvas_ element.
+When creating a WebGLEngine instance, a WebCanvas instance is automatically created. The `canvas` parameter is the _Canvas_ element's `id`.
 
 ```typescript
 const engine = await WebGLEngine.create({ canvas: "canvas" });
@@ -33,87 +29,83 @@ console.log(engine.canvas); // => WebCanvas instance
 
 ### Basic Adaptation
 
-The canvas size is generally controlled by the **device pixel ratio**, taking [WebCanvas](/en/apis/rhi-webgl/#WebCanvas) as an example:
+Canvas size is generally controlled by the **device pixel ratio**. Taking [WebCanvas](/apis/rhi-webgl/#WebCanvas) as an example:
 
 ```mermaid
 flowchart TD
     A[HtmlCanvas.clientWidth] -->|pixelRatio| B[WebCanvas.width]
     C[HtmlCanvas.clientHeight] -->|pixelRatio| D[WebCanvas.height]
 ```
 
-If developing by exporting an **NPM package** through the editor, you only need to control the **device pixel ratio** in the [project export](/en/docs/platform/platform) rendering export configuration.
-
-<img src="https://mdn.alipayobjects.com/huamei_yo47yq/afts/img/A*afw5QrbrxkQAAAAAAAAAAAAADhuCAQ/original" alt="image.png" style="zoom:50%;" />
-
-Or actively call `resizeByClientSize` in the code to adapt the canvas.
+Call `resizeByClientSize` to adapt the canvas:
 
 ```typescript
-// 使用设备像素比（ window.devicePixelRatio ）调整画布尺寸，
+// Adjust canvas size using the device pixel ratio (window.devicePixelRatio)
 engine.canvas.resizeByClientSize();
-// 自定义像素比调整画布尺寸
+// Adjust canvas size using a custom pixel ratio
 engine.canvas.resizeByClientSize(1.5);
 ```
 
-> When the display size of the canvas changes (such as when the browser window changes), the image may appear stretched or compressed. You can call `resizeByClientSize` to restore it to normal. In most cases, this line of code can meet the adaptation needs. If you have more complex adaptation requirements, please read the "Advanced Usage" section.
+When the display size of the canvas changes (e.g., when the browser window changes), the image may appear stretched or compressed. You can restore it to normal by calling `resizeByClientSize`. In most cases, this line of code can meet the adaptation requirements. If you have more complex adaptation needs, please read the "Advanced Usage" section.
 
 ## Advanced Usage
 
-Regarding adaptation, the core point to note is the **device pixel ratio**. Taking iPhoneX as an example, the device pixel ratio `window.devicePixelRatio` is _3_, the window width `window.innerWidth` is _375_, and the screen physical pixel width is: 375 * 3 = *1125*.
+Regarding adaptation, the key point is the **device pixel ratio**. Taking iPhone X as an example, the device pixel ratio `window.devicePixelRatio` is _3_, the window width `window.innerWidth` is _375_, and the physical screen pixel width is: 375 * 3 = *1125*.
 
-Rendering pressure is proportional to the physical pixel height and width of the screen. The larger the physical pixels, the greater the rendering pressure, and the more power it consumes. It is recommended to set the height and width of the canvas through the API exposed by [WebCanvas](/en/apis/rhi-webgl/WebCanvas), rather than using the native canvas API, such as modifying `canvas.width` or `canvas.style.width`.
+Rendering pressure is proportional to the physical pixel width and height of the screen. The larger the physical pixel, the greater the rendering pressure and the more power it consumes. It is recommended to set the canvas width and height through APIs exposed by [WebCanvas](/apis/rhi-webgl/WebCanvas), rather than using native canvas APIs such as `canvas.width` or `canvas.style.width`.
 
-> ️ **Note**: Some front-end scaffolds insert the following tag to modify the page's zoom ratio:
+> ⚠️ **Note**: Some front-end scaffolds may insert the following tag to modify the page's zoom ratio:
 >
 > `<meta name="viewport" content="width=device-width, initial-scale=0.333333333">`
 >
-> This line of code will change the value of `window.innerWidth` from 375 to 1125.
+> This line of code changes the value of `window.innerWidth` from 375 to 1125.
 
-除了 `resizeByClientSize` 自动适配，推荐使用以下两种模式：
+Apart from `resizeByClientSize`, which automatically adapts, the following two modes are recommended:
 
-### Energy-saving Mode
+### Energy-Saving Mode
 
-Considering that mobile devices, although having high-definition screens (high device pixel ratio), the actual GPU performance may not meet the performance requirements for high-definition real-time rendering (the rendering area ratio of 3x screens to 2x screens is 9:4, and 3x screens can easily cause the phone to overheat), in this mode, the engine achieves adaptation by scaling and stretching the canvas. The code is as follows:
+Considering that mobile devices, despite having high-definition screens (high device pixel ratio), may not have graphics card performance that meets the performance requirements for HD real-time rendering (the rendering area ratio of 3x screen to 2x screen is 9:4, and 3x screens can easily cause phones to overheat), the engine achieves adaptation by scaling the canvas in this mode. The code is as follows:
 
 ```typescript
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const pixelRatio = window.devicePixelRatio; // 如果已经设置 meta scale，请设置为 1
-const scale = 3 / 2; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+const pixelRatio = window.devicePixelRatio; // If meta scale is set, please set to 1
+const scale = 3 / 2; // Calculate canvas size for 3x HD screen as if it were 2x
 
 /**
- * 设置节能模式，默认全屏，也可以自己设置任意高宽
+ * Set energy-saving mode, defaults to full screen, but you can set any width and height
  */
 webcanvas.width = (window.innerWidth * pixelRatio) / scale;
 webcanvas.height = (window.innerHeight * pixelRatio) / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
+webcanvas.setScale(scale, scale); // Scale canvas
 ```
 
-If the canvas height and width have already been set via CSS (e.g., `width: 100vw; height: 100vh;`), you can achieve canvas scaling by passing parameters to `resizeByClientSize`:
+If the canvas width and height have been set via CSS (e.g., `width: 100vw; height: 100vh;`), you can scale the canvas by passing parameters to `resizeByClientSize`:
 
 ```typescript
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const scale = 2 / 3; // 3 倍高清屏按 2 倍屏来计算画布尺寸
+const scale = 2 / 3; // Calculate canvas size for 3x HD screen as if it were 2x
 
-webcanvas.resizeByClientSize(scale); // 拉伸画布
+webcanvas.resizeByClientSize(scale); // Scale canvas
 ```
 
 ### Fixed Width Mode
 
-In some cases, such as when the design draft has a fixed width of 750, developers might hardcode the canvas width to reduce adaptation costs. The code is as follows:
+In certain situations, such as when a design draft has a fixed width of 750, developers might hard-code the canvas width to reduce adaptation costs. The code is as follows:
 
 ```typescript
 import { WebCanvas } from "@galacean/engine";
 
 const canvas = document.getElementById("canvas");
 const webcanvas = new WebCanvas(canvas);
-const fixedWidth = 750; // 固定 750 宽度
+const fixedWidth = 750; // Fixed width of 750
 
 /**
- * 设置固定宽度模式
+ * Set fixed width mode
  */
 const scale = window.innerWidth / fixedWidth;
 webcanvas.width = fixedWidth;
 webcanvas.height = window.innerHeight / scale;
-webcanvas.setScale(scale, scale); // 拉伸画布
-```
+webcanvas.setScale(scale, scale); // Scale canvas
+```