title: Masking shapes in HTML5 canvas?
body: <p>Apologies if this has been asked elsewhere but it's pretty hard to phrase as it is so I couldn't find anything.</p>
  
  <p><strong>Is there any way to implement masks in canvas?</strong></p>
  
  <p><strong>For example,</strong> using shapes only (no images) I draw a house with a window. I also have a shape representing a person. I want that person to appear at the window - but obviously only so much as the window allows should be visible of the person. The rest would be masked.</p>
  
  <p>I thought about emptying the part of the house occupied by the window, such that there was a genuine hole in the layer, which makes the problem easy to solve.</p>
  
  <p>But I'm conscious you can't delete shapes or parts of shapes in canvas, only draw new stuff over old stuff. So in a multi-layered environment (I'm making a game in Kinetic.JS), what exactly can I do?</p>
  
  <p>Sorry if any of this is poorly explained - new to the whole graphic thing.</p>