fix(): _initRetinaScaling initializing the scaling regardless of re…

…tina settings in Canvas class. (fabricjs#8565)
bekacodechn · Jan 5, 2023 · 0bc63dc · 0bc63dc
1 parent 70f955c
commit 0bc63dc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(): `_initRetinaScaling`  initializaing the scaling regardless of settings in Canvas. [#8565](https://github.com/fabricjs/fabric.js/pull/8565)
 - fix(): regression of canvas migration with pointer and sendPointToPlane [#8563](https://github.com/fabricjs/fabric.js/pull/8563)
 - chore(TS): Use exports from files to build fabricJS, get rid of HEADER.js [#8549](https://github.com/fabricjs/fabric.js/pull/8549)
 - chore(): rm `fabric.filterBackend` => `getFilterBackend` [#8487](https://github.com/fabricjs/fabric.js/pull/8487)

diff --git a/src/canvas/canvas.class.ts b/src/canvas/canvas.class.ts
@@ -516,7 +516,7 @@ export class SelectableCanvas<
     this._createUpperCanvas();
     // @ts-ignore
     this._initEventListeners();
-    this._initRetinaScaling();
+    this._isRetinaScaling() && this._initRetinaScaling();
     this.calcOffset();
     this._createCacheCanvas();
   }

diff --git a/src/canvas/static_canvas.class.ts b/src/canvas/static_canvas.class.ts
@@ -346,7 +346,7 @@ export class StaticCanvas<
     this.renderAndResetBound = this.renderAndReset.bind(this);
     this.requestRenderAllBound = this.requestRenderAll.bind(this);
     this._initStatic(el, options);
-    this._initRetinaScaling();
+    this._isRetinaScaling() && this._initRetinaScaling();
     this.calcViewportBoundaries();
   }
 
@@ -382,9 +382,6 @@ export class StaticCanvas<
    * @private
    */
   _initRetinaScaling() {
-    if (!this._isRetinaScaling()) {
-      return;
-    }
     this.__initRetinaScaling(this.lowerCanvasEl, this.contextContainer);
   }
 
@@ -536,7 +533,7 @@ export class StaticCanvas<
       }
     });
 
-    this._initRetinaScaling();
+    this._isRetinaScaling() && this._initRetinaScaling();
     this.calcOffset();
 
     if (!cssOnly) {

diff --git a/test/unit/canvas.js b/test/unit/canvas.js
@@ -1958,36 +1958,44 @@
     assert.equal(aGroup._objects[3], circle2);
   });
 
-  QUnit.test('set dimensions', async function (assert) {
-    var el = fabric.getDocument().createElement('canvas'),
-      parentEl = fabric.getDocument().createElement('div');
-    el.width = 200; el.height = 200;
-    parentEl.className = 'rootNode';
-    parentEl.appendChild(el);
-
-    fabric.config.configure({ devicePixelRatio: 1.25 });
-
-    assert.equal(parentEl.firstChild, el, 'canvas should be appended at partentEl');
-    assert.equal(parentEl.childNodes.length, 1, 'parentEl has 1 child only');
-
-    el.style.position = 'relative';
-    var elStyle = el.style.cssText;
-    assert.equal(elStyle, 'position: relative;', 'el style should not be empty');
-
-    var canvas = new fabric.Canvas(el, { enableRetinaScaling: true, renderOnAddRemove: false });
-
-    canvas.setDimensions({ width: 500, height: 500 });
-    assert.equal(canvas._originalCanvasStyle, elStyle, 'saved original canvas style for disposal');
-    assert.notEqual(el.style.cssText, canvas._originalCanvasStyle, 'canvas el style has been changed');
-
-    await canvas.dispose();
-    assert.equal(canvas._originalCanvasStyle, undefined, 'removed original canvas style');
-    assert.equal(el.style.cssText, elStyle, 'restored original canvas style');
-    assert.equal(el.width, 500, 'restored width');
-    assert.equal(el.height, 500, 'restored height');
+  [true, false].forEach(enableRetinaScaling => {
+    QUnit.test(`set dimensions, enableRetinaScaling ${enableRetinaScaling}`, async function (assert) {
+      var el = fabric.getDocument().createElement('canvas'),
+        parentEl = fabric.getDocument().createElement('div');
+      el.width = 200; el.height = 200;
+      parentEl.className = 'rootNode';
+      parentEl.appendChild(el);
+
+      const dpr = 1.25;
+      fabric.config.configure({ devicePixelRatio: dpr });
+
+      assert.equal(parentEl.firstChild, el, 'canvas should be appended at partentEl');
+      assert.equal(parentEl.childNodes.length, 1, 'parentEl has 1 child only');
+
+      el.style.position = 'relative';
+      var elStyle = el.style.cssText;
+      assert.equal(elStyle, 'position: relative;', 'el style should not be empty');
+
+      var canvas = new fabric.Canvas(el, { enableRetinaScaling, renderOnAddRemove: false });
+
+      canvas.setDimensions({ width: 500, height: 500 });
+      assert.equal(canvas._originalCanvasStyle, elStyle, 'saved original canvas style for disposal');
+      assert.notEqual(el.style.cssText, canvas._originalCanvasStyle, 'canvas el style has been changed');
+      assert.equal(el.width, 500 * (enableRetinaScaling ? dpr : 1), 'expected width');
+      assert.equal(el.height, 500 * (enableRetinaScaling ? dpr : 1), 'expected height');
+      assert.equal(canvas.upperCanvasEl.width, 500 * (enableRetinaScaling ? dpr : 1), 'expected width');
+      assert.equal(canvas.upperCanvasEl.height, 500 * (enableRetinaScaling ? dpr : 1), 'expected height');
+
+      await canvas.dispose();
+      assert.equal(canvas._originalCanvasStyle, undefined, 'removed original canvas style');
+      assert.equal(el.style.cssText, elStyle, 'restored original canvas style');
+      assert.equal(el.width, 500, 'restored width');
+      assert.equal(el.height, 500, 'restored height');
 
+    });
   });
 
+
   QUnit.test('clone', function(assert) {
     var done = assert.async();
     assert.ok(typeof canvas.clone === 'function');