Kinetic Masking

HTML

<div id="container"></div>

CSS

body {
    background-color:skyblue;
}

JavaScript

var stage = new Kinetic.Stage({
          container: 'container',
          width: 300,
          height: 300
      });
      var layer = new Kinetic.Layer();
      stage.add(layer);

      var rect = new Kinetic.Shape({
          drawFunc: function (canvas) {
              context = canvas.getContext("2d");
              context.save();
              context.beginPath();
              context.rect(0, 0, 96, 96);
              context.fillStyle = "green";
              context.fill();
              context.globalCompositeOperation = "destination-out";
              drawStar(context, 45, 50, 5, 40, 15);
              canvas.fillStroke(this);
              context.restore();
          },
          width: 96,
          height: 96,
          fill: 'green',
          stroke: 'black',
          strokeWidth: 2
      });
      layer.add(rect);
      layer.draw();


      function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
          var rot = Math.PI / 2 * 3;
          var x = cx;
          var y = cy;
          var step = Math.PI / spikes;

          ctx.strokeSyle = "#000";
          ctx.beginPath();
          ctx.moveTo(cx, cy - outerRadius)
          for (i = 0; i < spikes; i+) {
              ;
              ctx.lineTo(x, y)
              rot += step

              x = cx + Math.cos(rot) * innerRadius;
              y = cy + Math.sin(rot) * innerRadius;
              ctx.lineTo(x, y)
              rot += step
          }
          ctx.lineTo(cx, cy - outerRadius)
          ctx.closePath();
          ctx.fill();
      }