better context method. close #343

test/unit/Container-test.ts

@@ -69,6 +69,44 @@ describe('Container', function () {
     compareLayers(layer, clipedLayer, 150);
   });
 
+  // ======================================================
+  it('clip function', function () {
+    var stage = addStage();
+
+    // cliped by circle is the same as draw circle
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var circle = new Konva.Circle({
+      fill: 'black',
+      x: 50,
+      y: 50,
+      radius: 40,
+    });
+    layer.add(circle);
+
+    layer.draw();
+
+    var clipedLayer = new Konva.Layer({
+      clipFunc: function (ctx) {
+        const path2D = new Path2D();
+        path2D.arc(50, 50, 40, 0, Math.PI * 2, false);
+        ctx.fill(path2D);
+      },
+    });
+    stage.add(clipedLayer);
+    var rect = new Konva.Rect({
+      x: 10,
+      y: 10,
+      fill: 'black',
+      width: 200,
+      height: 200,
+    });
+    clipedLayer.add(rect);
+    stage.draw();
+
+    compareLayers(layer, clipedLayer, 150);
+  });
+
   // ======================================================
   it('adder validation', function () {
     var stage = addStage();