title: How can I create a transparent shape within an existing shape using KineticJS
body: <p>Is there a simple way to "stamp" a transparent section from within another shape (or layer) using KineticJS? </p>
  
  <p>For example, using the following code:</p>
  
  <pre><code>var stage = new Kinetic.Stage({
      container: 'canvas',
      width: 100,
      height: 100
  });
  
  var layer = new Kinetic.Layer();
  
  var rect = new Kinetic.Rect({
      x: 1,
      y: 1,
      width: 96,
      height: 96,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 2
  });
  
  layer.add(rect);
  
  var star = new Kinetic.Star({
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      numPoints: 5,
      innerRadius: 15,
      outerRadius: 40,
      fill: 'yellow'
  });
  
  layer.add(star);
  
  stage.add(layer);
  </code></pre>
  
  <p>How would I make the star shape within the green box transparent so that elements behind the canvas are visible. Here's an example fiddle: <a href="http://jsfiddle.net/ZPVxa/" rel="nofollow">http://jsfiddle.net/ZPVxa/</a></p>
  
  <p>I have looked into filters, and I think that may be the way to go, but I can't seem to find what I'm looking for in the documentation. </p>