globalCompositeOperation

Question

I have tried to use globalCompositeOperation in a loop passing it different string (source-atop, source-over etc.) in the same 2D context but I noticed that Firefox let draw me only few shapes while Opera only the last.

Now, my question is can I use only ONE globalCompositeOperation at time into the current context?

Answer 1

The reason you're noticing this issue is the modes you're choosing aren't supported by the browser properly. There are some issues between browsers concerning the globalCompositeOperation. At this moment, there are only a few modes that work between browsers (Chrome/Safari/Opera/Firefox) without quirks:

• source-over
• source-atop
• destination-over
• destination-out
• lighter
• xor

To learn more check out the following link;

http://www.rekim.com/2011/02/11/html5-canvas-globalcompositeoperation-browser-handling/

As for your 2nd question, you can only use one mode at a time. This is unfortunate, because "light" and "darker" are more-like "blend-modes", and would be very useful to use with some of the other composite modes. I would love to see this change.

Answer 2

In short, yes.

The last globalCompositeOperation value takes place before a render, e.g. drawImage(),fillRect().

You can change it immediately after drawing to apply it to the next drawing like:

http://jsfiddle.net/eCDRN/

ctx.globalCompositeOperation = "copy";
ctx.fillRect(100, 100, 100, 100);
ctx.globalCompositeOperation = "destination-in";
ctx.fillRect(150, 150, 100, 100);
ctx.globalCompositeOperation = "xor";
ctx.fillRect(175, 175, 100, 100);