fix(): 5.x Disable offscreen check for bg and overlay when not needed (…

…#8896)

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [5.4.0]
+
+- fix() fix an issue with offScreen detection and background/overlay Vpt setting [`#8896`](https://github.com/fabricjs/fabric.js/pull/8896)
+
+## [5.2.1]
+
+- fix(): add `eraser` to Object state/cache props [`#7720`](https://github.com/fabricjs/fabric.js/pull/7720)
+
+## [5.2.0]
+
+- feat(fabric.Object): isType accepts multiple `type` [`#7715`](https://github.com/fabricjs/fabric.js/pull/7715)
+- chore(): Replace deprecated String.prototype.substr() with Array.prototype.slice() [`#7696`](https://github.com/fabricjs/fabric.js/pull/7696)
+- chore(): use Array.isArray instead of ie6+ workarounds [`#7718`](https://github.com/fabricjs/fabric.js/pull/7718)
+- MINOR: feat(fabric.Canvas): add `getTopContext` method to expose the internal contextTop [`#7697`](https://github.com/fabricjs/fabric.js/pull/7697)
+- fix(fabric.Object) Add cacheContext checks before trying to render on cache [`#7694`](https://github.com/fabricjs/fabric.js/pull/7694)
+- tests(): node test suite enhancement [`#7691`](https://github.com/fabricjs/fabric.js/pull/7691)
+- feat(Canvas#getCenter): migrate to `getCenterPoint` [`#7699`](https://github.com/fabricjs/fabric.js/pull/7699)
+- updated package.json [`803ce95`](https://github.com/fabricjs/fabric.js/commit/803ce95878150fba9e4195804bccae9bcfe45c6d)
+- tests(fabric.animation): fix test reliability [`4be0fb9`](https://github.com/fabricjs/fabric.js/commit/4be0fb9903e15db294b89030feb645e5da766740)
+
 ## [5.1.0]
 
 - build(deps): bump node-fetch from 2.6.6 to 2.6.7 [`#7684`](https://github.com/fabricjs/fabric.js/pull/7684)

src/static_canvas.class.js

@@ -999,10 +999,15 @@
       }
       if (object) {
         ctx.save();
+        var skipOffscreen = this.skipOffscreen;
+        // if the object doesn't move with the viewport,
+        // the offscreen concept does not apply;
+        this.skipOffscreen = needsVpt;
         if (needsVpt) {
           ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
         }
         object.render(ctx);
+        this.skipOffscreen = skipOffscreen;
         ctx.restore();
       }
     },

test/visual/generic_rendering.js

@@ -361,6 +361,72 @@
     height: 100,
   });
 
+  function bgOverlayVpt(canvas, callback) {
+    var rectbg = new fabric.Rect({
+      width: 300,
+      height: 300,
+      top: 0,
+      left: 0,
+      fill: 'rgba(255,0,0,0.5)'
+    });
+    var rectoverlay = new fabric.Rect({
+      width: 300,
+      height: 300,
+      top: 0,
+      left: 0,
+      fill: 'rgba(0,0,255,0.5)'
+    });
+    canvas.overlayVpt = false;
+    canvas.backgroundVpt = false;
+    canvas.setViewportTransform([0.1,0,0,0.1,7000,7000]);
+    canvas.backgroundImage = rectbg;
+    canvas.overlayImage = rectoverlay;
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'bg-overlay and vpts',
+    code: bgOverlayVpt,
+    golden: 'bgOverlayVpt.png',
+    percentage: 0.04,
+    width: 300,
+    height: 300,
+  });
+
+  function bgOverlayRespectingVpt(canvas, callback) {
+    var rectbg = new fabric.Rect({
+      width: 300,
+      height: 300,
+      top: 0,
+      left: 0,
+      fill: 'rgba(255,0,0,0.5)'
+    });
+    var rectoverlay = new fabric.Rect({
+      width: 300,
+      height: 300,
+      top: 0,
+      left: 0,
+      fill: 'rgba(0,0,255,0.5)'
+    });
+    canvas.overlayVpt = true;
+    canvas.backgroundVpt = true;
+    canvas.setViewportTransform([0.9,0,0,0.9,150,150]);
+    canvas.backgroundImage = rectbg;
+    canvas.overlayImage = rectoverlay;
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'bg-overlay and vpts',
+    code: bgOverlayRespectingVpt,
+    golden: 'bgOverlayRespectVpt.png',
+    percentage: 0.04,
+    width: 300,
+    height: 300,
+  });
+
   function gradientStroke(canvas, callback) {
     var line = new fabric.Line([10, 10, 200, 200], {
       stroke: new fabric.Gradient({