HTML5 Canvas compositing question (source-in)

Question

I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from here: hxxp://oreilly.com/javascript/archive/flashhacks.html but thats 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. Here is the example: (i think it can only be viewed in chrome, not working in FF 3.6)

http://acpound.fylez.com/test/example.html

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.

The source is all on the page.

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.

Answer 1

Canvas Compositing support was and is broken in most major browsers.

Compare the images at https://developer.mozilla.org/en/Canvas_tutorial/Compositing with the actual rendering in your browser at https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html to see what works in which browser right now.