CODEWITHSUNDEEP
javascripthtmlcanvas
xdevel2000
xdevel2000

Reputation: 21364

globalCompositeOperation

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?

Upvotes: 3

Views: 4510

Answers (2)

Jaibuu
Jaibuu

Reputation: 578

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

Upvotes: 1

Michael Deal
Michael Deal

Reputation: 3018

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.

Upvotes: 5

Related Questions