Canvas globalCompositeOperation is not working correctly

Question

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?

ADDITION: I've just actually noticed, a far more striking an obvious example. The xor is clearly showing a purple colour, when according to the official spec: "Exclusive OR of the source image and destination image.", it should be showing nothing! Nowhere does it mention that opacity should affect these rules.

Answer 1

Its working exactly how it should in your example. Take a look at this which was taken directly from the spec

the source image, A, is the shape or image being rendered, and the destination image, B, is the current state of the bitmap.

Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere.

In that definition only the source image will be displayed. Since its drawing the destination image and then subtracting the source image, you get a lighter overall image.

Another example would be source-over, you would expect the transparencies to be added to eachother, likewise then using destination-in and source-in the transparency should be reduced due to the subtraction of the shape.

Thanks @simonsarris for finding this gem The Porter Duff Compositing Operators