From 986e0a23a235a65580c7a56681bd3107a986552d Mon Sep 17 00:00:00 2001
From: diodiogod <diodiogod@users.noreply.github.com>
Date: Sat, 17 Jan 2026 15:03:00 -0300
Subject: [PATCH] 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.
---
 js/Canvas.js        | 4 ++--
 js/CanvasLayers.js  | 4 ++--
 src/Canvas.ts       | 4 ++--
 src/CanvasLayers.ts | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/js/Canvas.js b/js/Canvas.js
index 16c0bdb..66f8692 100644
--- a/js/Canvas.js
+++ b/js/Canvas.js
@@ -443,8 +443,8 @@ export class Canvas {
      * Inicjalizuje podstawowe właściwości canvas
      */
     initCanvas() {
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
+        // Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
+        // this.width and this.height are for the OUTPUT AREA, not the display canvas
         this.canvas.style.border = '1px solid black';
         this.canvas.style.maxWidth = '100%';
         this.canvas.style.backgroundColor = '#606060';
diff --git a/js/CanvasLayers.js b/js/CanvasLayers.js
index 0e08158..a1e180f 100644
--- a/js/CanvasLayers.js
+++ b/js/CanvasLayers.js
@@ -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();
diff --git a/src/Canvas.ts b/src/Canvas.ts
index f08b72d..7e29b97 100644
--- a/src/Canvas.ts
+++ b/src/Canvas.ts
@@ -578,8 +578,8 @@ export class Canvas {
      * Inicjalizuje podstawowe właściwości canvas
      */
     initCanvas() {
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
+        // Don't set canvas.width/height here - let the render loop handle it based on clientWidth/clientHeight
+        // this.width and this.height are for the OUTPUT AREA, not the display canvas
         this.canvas.style.border = '1px solid black';
         this.canvas.style.maxWidth = '100%';
         this.canvas.style.backgroundColor = '#606060';
diff --git a/src/CanvasLayers.ts b/src/CanvasLayers.ts
index d2d9343..b3f4dda 100644
--- a/src/CanvasLayers.ts
+++ b/src/CanvasLayers.ts
@@ -1263,8 +1263,8 @@ export class CanvasLayers {
         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();