From 0bedaaadba70d711ffb5b6c8a0ecf2bb00e5a800 Mon Sep 17 00:00:00 2001
From: congzhou09 <yuancongzhou@yeah.net>
Date: Thu, 27 Nov 2025 10:31:18 +0800
Subject: [PATCH] fix(editor): surface-block canvas size not fitting its
 container in edgeless mode when zoom is not 1 (#14015)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Problem
●In edgeless mode, the embed-edgeless-doc's content does not match the
size of its outer block when zoom ≠ 1.
●The follwing image and video show the issue at zoom = 0.5.

<img width="610" height="193" alt="图片"
src="https://github.com/user-attachments/assets/c50849c6-d55b-4175-9b70-218f69ab976a"
/>


https://github.com/user-attachments/assets/ea7e7cc4-64ae-4747-8124-16c4eea6458e

### Reason and resolve
●The issue occurs because the surface-block canvas uses the container’s
dimensions obtained from getBoundingClientRect(), which are already
affected by the CSS transform. The canvas is then transformed again
together with the container, causing the size mismatch.
●To keep all drawing operations in the surface-block’s original
coordinate space, we apply a reverse transform to the canvas.

### After


https://github.com/user-attachments/assets/6c802b81-d520-44a0-9f01-78d0d60d37b8



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Canvas rendering now properly responds to viewport zoom levels. Visual
scaling is applied dynamically to ensure canvases align correctly with
viewport scaling, providing consistent and accurate rendering during
zoomed interactions while preserving original canvas dimensions.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/blocks/surface/src/renderer/canvas-renderer.ts     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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;
       },