javascript - globalCompositeOperation - Stack Overflow

admin管理员组

文章数量:1391975

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?

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?

• javascript
• html
• canvas

Share Improve this question Follow edited Sep 4, 2010 at 21:36 GhassanPL 2,73455 gold badges3232 silver badges4040 bronze badges asked Jul 26, 2010 at 7:02 xdevel2000xdevel2000 21.5k4242 gold badges131131 silver badges200200 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./2011/02/11/html5-canvas-globalpositeoperation-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 posite modes. I would love to see this change.

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

本文标签： javascriptglobalCompositeOperationStack Overflow