The good news is that it can! So we can start using it more without work arounds!

But do all the browsers behave the same? Obviously not. I remember Microsoft saying they had left it off the beta because they didn’t think the standards were nailed down enough. I ran the mozilla canvas composite check on different browsers to see how they all handle it. Here are the results.

IE9 Release Candidate 1

Opera 10.62

Firefox 3.613

Chrome 9.0.597.94

Safari 5.03

You can see that IE9, Opera and firefox(ignoring the copy) behave the same and the 2 webkit browsers Chrome and Safari behave the same.

Chrome and Safari seem to be the only ones to handle the “darker” mode and they handle “source-in”, “source-out”, “destination-in”, ”destination-atop” differently. The webkit browsers seem to handle the “Display transparency elsewhere” rule differently by leaving the destination visible in the transparent areas of the source.

Judging by the rules found on whatwg.org I have gone through and created a tick list of what is behaving correctly according to them.

The only ones we can trust to be the same across the main 5 are…. “source-over”,”source-atop”,”destination-over”,”destination-out”,”lighter” and “xor”

Composition	IE9	Opera	Firefox	Chrome	Safari
“source-over”
“source-in”
“source-out”
“source-atop”
“destination-over”
“destination-in”
“destination-out”
“destination-atop”
“lighter”
“darker”
“copy”
“xor”