From 03b98a06785a1a265af116fca3feacf359141abb Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sun, 13 Jan 2019 12:13:03 +0100
Subject: [PATCH] fixes a particular case of clipPath problem (#5477)

---
 src/shapes/object.class.js |  6 +++++-
 test/visual/clippath.js    | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
index 556faec5fc5..16774452d5f 100644
--- a/src/shapes/object.class.js
+++ b/src/shapes/object.class.js
@@ -1175,8 +1175,10 @@
      * @param {CanvasRenderingContext2D} ctx Context to render on
      */
     drawObject: function(ctx, forClipping) {
-
+      var originalFill = this.fill, originalStroke = this.stroke;
       if (forClipping) {
+        this.fill = 'black';
+        this.stroke = '';
         this._setClippingProperties(ctx);
       }
       else {
@@ -1186,6 +1188,8 @@
       }
       this._render(ctx);
       this._drawClipPath(ctx);
+      this.fill = originalFill;
+      this.stroke = originalStroke;
     },
 
     _drawClipPath: function(ctx) {
diff --git a/test/visual/clippath.js b/test/visual/clippath.js
index 4945573a243..17e7e309d5d 100644
--- a/test/visual/clippath.js
+++ b/test/visual/clippath.js
@@ -48,6 +48,22 @@
     percentage: 0.06,
   });
 
+  function clipping02(canvas, callback) {
+    var clipPath = new fabric.Circle({ radius: 50, strokeWidth: 40, top: -50, left: -50, fill: '' });
+    var obj = new fabric.Rect({ top: 0, left: 0, strokeWidth: 0, width: 200, height: 200, fill: 'rgba(0,255,0,0.5)'});
+    obj.clipPath = clipPath;
+    canvas.add(obj);
+    canvas.renderAll();
+    callback(canvas.lowerCanvasEl);
+  }
+
+  tests.push({
+    test: 'falsy values for fill are handled',
+    code: clipping02,
+    golden: 'clipping01.png',
+    percentage: 0.06,
+  });
+
   function clipping1(canvas, callback) {
     var zoom = 20;
     canvas.setZoom(zoom);