title: KineticJs - Merging an image onto another
body: <p>I'd like to know if there is some way in Kinetic to have an image merged with another image on a lower layer, creating a kind of crop effect based on the shape of the "cropping" image.</p>
  
  <p>The image must have a transparent background as a result, which is the main source of difficulty for me. I would otherwise just have used a mask with dragging turned off... I've made a diagram to explain what I want a bit better. Any suggestions welcome.</p>
  
  <p><a href="http://imgur.com/MhAqhQQ" rel="nofollow">diagram</a></p>
  
  <p>I've also made a quick <a href="http://jsfiddle.net/ty7n77q6/" rel="nofollow">jsfiddle</a>, where I would like the contents of the image to be displayed <em>inside</em> the box. I feel like one <code>layer</code> is the way to go on this one.</p>