Fix canvas sizing bug by separating display and output dimensions

The canvas was getting corrupted to a small strip because of confusion
between two different dimension types:
- Output area dimensions (logical working area, e.g. 512x512)
- Display canvas dimensions (actual pixels shown on screen)

Root cause: Setting canvas.width/height attributes to match output area
while also using CSS width:100%/height:100% created conflicts. When
zooming or reloading, wrong dimensions would be read and saved.

Fix: Remove canvas element width/height attribute assignments. Let the
render loop control display size based on clientWidth/clientHeight.
Keep output area dimensions separate.

This prevents the canvas from being saved with corrupted tiny dimensions
and fixes the issue where canvas would only show in a small strip after
zooming or reloading workflows.
This commit is contained in:
diodiogod
2026-01-17 15:03:00 -03:00
parent 068ed9ee59
commit 986e0a23a2
4 changed files with 8 additions and 8 deletions

View File

@@ -1100,8 +1100,8 @@ export class CanvasLayers {
this.canvas.width = width;
this.canvas.height = height;
this.canvas.maskTool.resize(width, height);
this.canvas.canvas.width = width;
this.canvas.canvas.height = height;
// Don't set canvas.width/height - the render loop will handle display size
// this.canvas.width/height are for OUTPUT AREA dimensions, not display canvas
this.canvas.render();
if (saveHistory) {
this.canvas.canvasState.saveStateToDB();