Blend Mode performance test

Hello, I was curious as to what the performance differences are between different blend modes when drawing to a canvas. As we know, Blend Modes in Construct 2 translate directly to the globalCompositeOperation when using Canvas. The same blend can often be achieved in multiple ways, so it's worth knowing which way is most performant. I set up a jsperf test here so you can see the results and test it yourself. It would be interesting to see results from different browsers and on mobile devices:

jsperf.com/globalcompositeoperation/5

Notable results: "copy" is by far the fastest operation, and "source-over" ("Normal" in Construct 2) is next. "destination-out" and "destination-in" are next fastest, but still much slower. Note that since the Canvas and the images being drawn are the same size, this does not necessarily reflect a standard composite operation. Usually a sprite will be much smaller than the Canvas it's being drawn to. This might significantly affect the relative performance of these composite operations.

Side question: why is the "darker" globalCopositeOperation not available through Construct 2? We have access to "lighter" (called "Additive in Construct 2). Do some platforms support "lighter" but not "darker"?

I think your copy result is artificially superior because the test first sets copy, then sets the other composite mode. Switching composite mode can introduce significant overhead in the rendering engine, and the copy test is the only one which doesn't need to constantly switch composite mode. Firefox's results are interesting though - seems to score the same for all of them except destination-out. The overhead should also be smaller in the WebGL engine, but I guess there's not an easy way to quickly test that.

"darker" was removed from the standard last I checked, and there are some new ones like "multiply" also in the standard, but I don't think any browsers support them yet. In the mean time you can do them all with WebGL anyway.

Hi Ashley, that's a good point about copy, but I was originally writing the first image with source-over and got a nearly identical graph. Magnitude was different, since copy is faster than source-over, but relative magnitudes were very similar. So for that reason, I'm fairly confident that switching modes wasn't having an effect on the test.

It's also a good idea to note that all the results I've mentioned has been regarding Chrome v24.

Yeah, the Firefox results are interesting. It shows that both browsers could do a lot in optimizing canvas writes for various blend modes. It's actually source-over that firefox performs the best in, though. It's a little confusing because both source-over and destination-out are the same colour on the graph.

It should be pretty straightforward to make another test using the WebGL renderer, but I haven't done any WebGL yet (implementing drawGL in my plugin is next on my list) so I'll save that test for later.

Thanks for the info. Not being in the standard and not being supported are reasonable reasons not to include them. :)