ISSUE-5884 fix canvas pattern as background (fabricjs#5973)

package.json

@@ -60,7 +60,7 @@
     "testem:ci": "testem ci"
   },
   "optionalDependencies": {
-    "canvas": "^2.6.0",
+    "canvas": "^2.6.1",
     "jsdom": "^15.1.0"
   },
   "devDependencies": {

src/static_canvas.class.js

@@ -1013,12 +1013,9 @@
           ? fill.toLive(ctx, this)
           : fill;
         if (needsVpt) {
-          ctx.transform(
-            v[0], v[1], v[2], v[3],
-            v[4] + (fill.offsetX || 0),
-            v[5] + (fill.offsetY || 0)
-          );
+          ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]);
         }
+        ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0);
         var m = fill.gradientTransform || fill.patternTransform;
         m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
         ctx.fill();

test/visual/generic_rendering.js

@@ -1,4 +1,5 @@
 (function() {
+  var getFixture;
   if (fabric.isLikelyNode) {
     if (process.env.launcher === 'Firefox') {
       fabric.browserShadowBlurConstant = 0.9;
@@ -12,6 +13,7 @@
     if (process.env.launcher === 'Edge') {
       fabric.browserShadowBlurConstant = 1.75;
     }
+    getFixture = global.getFixture;
   }
   else {
     if (navigator.userAgent.indexOf('Firefox') !== -1) {
@@ -23,6 +25,7 @@
     if (navigator.userAgent.indexOf('Edge') !== -1) {
       fabric.browserShadowBlurConstant = 1.75;
     }
+    getFixture = window.getFixture;
   }
   fabric.enableGLFiltering = false;
   fabric.isWebglSupported = false;
@@ -260,5 +263,53 @@
     height: 300,
   });
 
+  function canvasPattern(fabricCanvas, callback) {
+    getFixture('diet.jpeg', false, function(img) {
+      var pattern = new fabric.Pattern({
+        source: img,
+        repeat: 'repeat',
+        offsetX: -120,
+        offsetY: 50
+      });
+      fabricCanvas.backgroundColor = pattern;
+      var canvas = fabricCanvas.toCanvasElement();
+      callback(canvas);
+    });
+  }
+
+  tests.push({
+    test: 'canvas with background pattern and export',
+    code: canvasPattern,
+    // use the same golden on purpose
+    golden: 'canvasPattern.png',
+    percentage: 0.09,
+    width: 500,
+    height: 500,
+  });
+
+  function canvasPatternMultiplier(fabricCanvas, callback) {
+    getFixture('diet.jpeg', false, function(img2) {
+      var pattern = new fabric.Pattern({
+        source: img2,
+        repeat: 'repeat',
+        offsetX: -120,
+        offsetY: 50
+      });
+      fabricCanvas.backgroundColor = pattern;
+      var canvas = fabricCanvas.toCanvasElement(0.3);
+      callback(canvas);
+    });
+  }
+
+  tests.push({
+    test: 'canvas with background pattern and multiplier',
+    code: canvasPatternMultiplier,
+    // use the same golden on purpose
+    golden: 'canvasPatternMultiplier.png',
+    percentage: 0.09,
+    width: 500,
+    height: 500,
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();