Fix drawing with compound-paths as clip-items

Closes #1361

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Fixed
 
+- Fix drawing with compound path as clip item (#1361).
 - SVG Export: Fix error when `Item#matrix` is not invertible (#1580).
 - SVG Import: Fix gradient default values (#1632).
 - JSON Import: Prevent overriding `Item#insert()` (#1392).

src/item/Item.js

@@ -4427,8 +4427,10 @@ new function() { // Injection scope for hit-test functions shared with project
         this._draw(ctx, param, viewMatrix, strokeMatrix);
         ctx.restore();
         matrices.pop();
-        if (param.clip && !param.dontFinish)
+        if (param.clip && !param.dontFinish) {
-            ctx.clip();
+            // Pass fill-rule to handle clipping with compound-paths (#1361).
+            ctx.clip(this.getFillRule());
+        }
         // If a temporary canvas was created, composite it onto the main canvas:
         if (!direct) {
             // Use BlendMode.process even for processing normal blendMode with

test/tests/Item.js

@@ -951,3 +951,27 @@ test('Item#rasterize() with empty bounds', function() {
     view.update();
     expect(0);
 });
+
+test('Item#draw() with CompoundPath as clip item', function() {
+    function createdClippedGroup(invertedOrder) {
+        var compound = new CompoundPath({
+            children: [
+                new Path.Circle(new Point(50, 50), 50),
+                new Path.Circle(new Point(100, 50), 50)
+            ],
+            fillRule: 'evenodd'
+        });
+
+        var rectangle = new Shape.Rectangle(new Point(0, 0), new Point(150, 50));
+
+        var group = new Group();
+        group.children = invertedOrder
+            ? [compound, rectangle]
+            : [rectangle, compound];
+        group.fillColor = 'black';
+        group.clipped = true;
+        return group;
+    };
+
+    comparePixels(createdClippedGroup(true), createdClippedGroup(false));
+});