GlobalCompositeOperation

Question

I tried to use it globalCompositeOperationin a loop, passing it different lines ( source-atop, source-overetc.) in the same 2D context, but I noticed that Firefox allows me to draw only a few shapes, while Opera is just the last.

Now, my question is: can I only use ONE globalCompositeOperationin time in the current context?

Answer 1

The reason you notice this problem is because the modes you choose are not supported by the browser properly. There are some problems between browsers regarding globalCompositeOperation. Currently, there are only a few modes that work between browsers (Chrome / Safari / Opera / Firefox) without quirks:

• source over
• source on top
• destinations through
• destinations from
• lighter
• exclusive

To find out more, check out the following link;

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

, . , "" "" "blend-modes", . .

Answer 2

, .

globalCompositeOperation , . DrawImage(), FillRect().

, , :

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);