title: HTML5 Canvas compositing  (source-in)
body: <p>I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from <a href="http://oreilly.com/javascript/archive/flashhacks.html" rel="nofollow noreferrer">this page</a>. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.</p>
  
  <p>The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.</p>
  
  <p>I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.</p>