title: kineticjs - mask/contain images so no overlap
body: <p>i have 2 images on my stage underneath an overlay image of 2 frames. The user can drag each image as if they were positioninng each image inside a photo frame. The problem i have is the yoda image in this example can overlap and appear inside the darth vader frame on the left (and vice-versa), as shown here:</p>
  <p><a href="https://i.stack.imgur.com/6wsXi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6wsXi.png" alt="overlap example" /></a></p>
  
  <p>jsfiddle here:</p>
  <p><a href="http://jsfiddle.net/vTLkn/" rel="nofollow noreferrer">http://jsfiddle.net/vTLkn/</a></p>
  <p>Is there a way of placing the images inside some form of container or rectangle to stop this so they cannot appear inside another 'frame'?</p>
  <p>The final page could end up having up to 5 or 6 frames and images with each image able to be scaled up or down as well as being dragged by the user anywhere they want (i had looked at the <code>dragBoundsFunc</code> but i don't actually want to restrict where they place it just stop the overlapping.</p>
  <p>I also tried using a rectangle as an image mask and the image as the <code>fillPatternImage</code> attribute but i cannot then drag and scale the image inside then, just the rectangle itself.</p>