diff --git a/blocksuite/affine/blocks/surface/src/renderer/canvas-renderer.ts b/blocksuite/affine/blocks/surface/src/renderer/canvas-renderer.ts
index 3ecb7f902..86f53a739 100644
--- a/blocksuite/affine/blocks/surface/src/renderer/canvas-renderer.ts
+++ b/blocksuite/affine/blocks/surface/src/renderer/canvas-renderer.ts
@@ -113,7 +113,7 @@ export class CanvasRenderer {
    * It is not recommended to set width and height to 100%.
    */
   private _canvasSizeUpdater(dpr = window.devicePixelRatio) {
-    const { width, height } = this.viewport;
+    const { width, height, viewScale } = this.viewport;
     const actualWidth = Math.ceil(width * dpr);
     const actualHeight = Math.ceil(height * dpr);
 
@@ -124,6 +124,8 @@ export class CanvasRenderer {
       update(canvas: HTMLCanvasElement) {
         canvas.style.width = `${width}px`;
         canvas.style.height = `${height}px`;
+        canvas.style.transform = `scale(${1 / viewScale})`;
+        canvas.style.transformOrigin = `top left`;
         canvas.width = actualWidth;
         canvas.height = actualHeight;
       },