fixes a particular case of clipPath problem (#5477)

fabricjs · Jan 13, 2019 · 03b98a0 · 03b98a0
1 parent 1cf38e1
commit 03b98a0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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);