From 74414581d3fb29ac408acee151105524d656f322 Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sun, 24 Mar 2019 17:36:52 +0100
Subject: [PATCH] Fix shadow offsets on dataUrl export (#5593)

---
 src/mixins/canvas_dataurl_exporter.mixin.js |   3 +
 test/visual/golden/dataurl10.png            | Bin 0 -> 518 bytes
 test/visual/golden/dataurl12.png            | Bin 0 -> 924 bytes
 test/visual/toDataURL.js                    | 127 ++++++++++++++++++++
 4 files changed, 130 insertions(+)
 create mode 100644 test/visual/golden/dataurl10.png
 create mode 100644 test/visual/golden/dataurl12.png

diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js
index 7e8ee51567b..86e63eed60f 100644
--- a/src/mixins/canvas_dataurl_exporter.mixin.js
+++ b/src/mixins/canvas_dataurl_exporter.mixin.js
@@ -71,9 +71,11 @@
           originalInteractive = this.interactive,
           originalContext = this.contextContainer,
           newVp = [newZoom, 0, 0, newZoom, translateX, translateY],
+          originalRetina = this.enableRetinaScaling,
           canvasEl = fabric.util.createCanvasElement();
       canvasEl.width = scaledWidth;
       canvasEl.height = scaledHeight;
+      this.enableRetinaScaling = false;
       this.interactive = false;
       this.viewportTransform = newVp;
       this.width = scaledWidth;
@@ -88,6 +90,7 @@
       this.calcViewportBoundaries();
       this.contextContainer = originalContext;
       this.interactive = originalInteractive;
+      this.enableRetinaScaling = originalRetina;
       return canvasEl;
     },
   });
diff --git a/test/visual/golden/dataurl10.png b/test/visual/golden/dataurl10.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b25655312241cbc8321735918b6d95eaec3ecad
GIT binary patch
literal 518
zcmeAS@N?(olHy`uVBq!ia0vp^(?FPm4M^HB7Cr(}Y)RhkE)4%caKYZ?lNlHocYC@x
zhE&XXd)LrAI#HtSp?h#h(y?F4Eq&|$RbB66O^-DWW4@#)%agnCiNew6HN896ePr3U
zXM**8$@?q}3>F;f)${7-mUdO%?U8#RF{e+iq5tLOEA6XODrf3Ems<AJ@}`aI?2E-R
zlTU8YoBZ_oldN@#UDpoHnjWqwI@$c%{C%q5&pJx&Q@Or4-6AYcN9$fq^42{n>G~%l
zAHR9~u79(y-lR2U{rS@Or#>+}>HP9d^XK@MuYbSy|GOvVxykq3W&YQChkhMhJ%KAR
zP*F###kF<A3IQ?ELyMduLO8l<A=qV}zbr%7=GI!(NRxAEGUj3+Z+w3J=|pL9LvGQ=
z+oi#qJ?l))KhK|>XnS_^r?RQ{CaJM~)LN2szqi!*G0*mwYpaq4fVvKgCq64RetGwW
l;=O~9UoZlrhD6X%|4DfBSC#iw!G&@lt)8xaF6*2UngAVt%uE0P

literal 0
HcmV?d00001

diff --git a/test/visual/golden/dataurl12.png b/test/visual/golden/dataurl12.png
new file mode 100644
index 0000000000000000000000000000000000000000..e167a2c55ddd8649f3ddfee0b1d5ff8ec7c4afc6
GIT binary patch
literal 924
zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYY>nc6VX;4}uH!E}zW6z#Qo5
z;uumf=k1;SUeSdz?GM-2vrTUb*u$}Maro1%WougEoObW(xNt);mdjDg^5c`G=Z#qn
zA1<DF{jvTGNuYr+V4<4+{>Pp5?$HMg@2<CHm{zp!8$(0AYJ@{u0;6OTYf6k<(Q|#{
z?cTf(3;K;`Z#6$)xbqN`5exST0UZVB4Glfbe0RV9eD>hG^PS3r&HpE8gGG4`f|W%4
zxv=-e^E1zLb?&YIJ%9IXTls2>Z_`+9&%Se={k}f$a6C(P+BW0o`_uHU-TUbG``+oC
z`_~I<-zakLo^?Z?->y%d2V@1*Fo=C4n4>qn?!fMux0lL)z7bb`zkT!8a)$ikR@M{_
zu?dQh=wg@MWq&Sbn$)IEvuEy%sAl<K77mX`psJ7aoWK8Gyf)(g;WIJoZJ8=&Ln5o^
z=>MOVuQJ~<o;mZbvSQxMx3`=ve4Dmzo;h>%R(FH*#-EeZ;;zXZ%KS7<%X<E?`Nx+h
qSnrP5d*;mRQ_-+QH1z3)$)BX{Lgadv#W*B^eB<fr=d#Wzp$P!C2o)Lt

literal 0
HcmV?d00001

diff --git a/test/visual/toDataURL.js b/test/visual/toDataURL.js
index fdcf3342eba..86c3bdfab8b 100644
--- a/test/visual/toDataURL.js
+++ b/test/visual/toDataURL.js
@@ -215,6 +215,133 @@
     height: 1800,
   });
 
+  function toDataURL10(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = true;
+    fabric.devicePixelRatio = 2;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5 });
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl with retina',
+    code: toDataURL10,
+    // use the same golden on purpose
+    golden: 'dataurl10.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
+  function toDataURL11(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = false;
+    fabric.devicePixelRatio = 1;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5 });
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl without retina',
+    code: toDataURL11,
+    // use the same golden on purpose
+    golden: 'dataurl10.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
+  function toDataURL12(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = 2;
+    fabric.devicePixelRatio = 2;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5, enableRetinaScaling: true });
+    fabric.devicePixelRatio = 1;
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl with retina and retinaScaling enable in export',
+    code: toDataURL12,
+    // use the same golden on purpose
+    golden: 'dataurl12.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
 
   function testWrapper(test) {
     var actualTest = test.code;