// first we need to create a stage
var stage = new Konva.Stage({
  container: "container", // id of container <div>
  width: 500,
  height: 500
});

// then create layer
var layer = new Konva.Layer();

var bgRect = new Konva.Rect({
  x: 0,
  y: 0,
  width: 200,
  height: 200,
  fillLinearGradientStartPoint: { x: 0, y: 0 },
  fillLinearGradientEndPoint: { x: 200, y: 200 },
  fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
})
layer.add(bgRect);

// Create the clipping group
var group = new Konva.Group({
  draggable: true,
  clipFunc: function (ctx) {
    // Start only one path
    ctx.beginPath();

    // Draw the first hull: clockwise
    ctx.moveTo(50, 50);
    ctx.lineTo(100, 50);
    ctx.lineTo(100, 100);
    ctx.lineTo(50, 100);
    // Closing path, but not starting a new one
    ctx.closePath();

    // Draw the second hull: clockwise
    ctx.moveTo(100, 100);
    ctx.lineTo(150, 100);
    ctx.lineTo(150, 150);
    ctx.lineTo(100, 150);
    ctx.closePath();

    // Now draw two holes: counterclockwise
    ctx.moveTo(110, 110);
    ctx.lineTo(110, 140);
    ctx.lineTo(140, 140);
    ctx.lineTo(140, 110);
    ctx.closePath();

    ctx.moveTo(60, 60);
    ctx.lineTo(60, 90);
    ctx.lineTo(90, 90);
    ctx.lineTo(90, 60);
    ctx.closePath();

  }
});

// create our shape
var rect = new Konva.Rect({
  x: 0,
  y: 40,
  width: 200,
  height: 120,
  fill: "green",
});

// create our shape
var circle = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  fill: "red",
  stroke: "black",
  strokeWidth: 4,
  draggable: true
});

// add the shapes to the clipping group
group.add(rect);
group.add(circle);

// add the group to the layer
layer.add(group);

// add the layer to the stage
stage.add(layer);

// draw the image
layer.draw();

let clipFuncVisible = true;
$('#toggle').on('click', function(){  
  toggle();  
})

function toggle(){
  clipFuncVisible = !clipFuncVisible;
  if (clipFuncVisible){
    // add the shapes to the clipping group
    group.add(rect);
    group.add(circle);   
  }
  else {
    layer.add(rect);
    layer.add(circle);
  }
}
toggle();