Merge branch 'am/add-fill-and-clip-options-support' of https://github.com/alesmenzel/konva into alesmenzel-am/add-fill-and-clip-options-support

test/node-global-setup.mjs

@@ -0,0 +1,11 @@
+export function mochaGlobalSetup() {
+  globalThis.Path2D ??= class Path2D {
+    constructor(path) {
+      this.path = path
+    }
+
+    get [Symbol.toStringTag]() {
+      return `Path2D`;
+    }
+  }
+}

test/unit/Group-test.ts

@@ -1,4 +1,5 @@
 import { addStage, cloneAndCompareLayer, Konva } from './test-utils';
+import { assert } from 'chai';
 
 describe('Group', function () {
   // ======================================================
@@ -45,4 +46,42 @@ describe('Group', function () {
 
     cloneAndCompareLayer(layer, 200);
   });
+
+  it('clip group with a Path2D', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var path = new Konva.Group({
+      width: 100,
+      height: 100,
+      clipFunc: () => [new Path2D('M0 0v50h50Z')]
+    });
+
+    layer.add(path);
+    stage.add(layer);
+
+    const trace = layer.getContext().getTrace()
+
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D]);transform(1,0,0,1,0,0);restore();');
+  });
+
+  it('clip group with a Path2D and clipRule', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var path = new Konva.Group({
+      width: 100,
+      height: 100,
+      clipFunc: () => [new Path2D('M0 0v50h50Z'), 'evenodd'],
+    });
+
+    layer.add(path);
+    stage.add(layer);
+
+    const trace = layer.getContext().getTrace()
+
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D],evenodd);transform(1,0,0,1,0,0);restore();');
+  });
 });

test/unit/Path-test.ts

@@ -1603,4 +1603,23 @@ describe('Path', function () {
 
     assert.equal(trace1, trace2);
   });
+
+  it('draw path with fillRule', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var path = new Konva.Path({
+      data: 'M200,100h100v50z',
+      fill: '#ccc',
+      fillRule: 'evenodd',
+    });
+
+    layer.add(path);
+    stage.add(layer);
+
+    const trace = layer.getContext().getTrace()
+
+    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();moveTo(200,100);lineTo(300,100);lineTo(300,150);closePath();fillStyle=#ccc;fill(evenodd);restore();');
+  });
 });