Canvas globalCompositeOperation is not working correctly

Canvas globalCompositeOperation is not working correctly

I've put this demo from MDN,
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
into a jsFiddle and made the colours 50% transparent.
http://jsfiddle.net/eGAvb/
Now, according to Apple, source-in is supposed to "Display the source
image wherever both the source image and destination image are opaque.
Display a blend wherever the source and destination are both translucent.
Display transparency wherever either the source or destination are
transparent."
So you can see a problem when you look at how it displays. It is a very
light pink, not purple at all. Please can somebody explain why none of the
blue from the square has been blended in here? Why has it actually got
lighter?