Canvas globalCompositeOperation模式应该来自drawImage吗？

Question

I am using globalCompositeOperation = 'copy' then a drawImage so that my new image replaces what is underneath.

This works fine in the latest Safari and Chrome browsers on Mac and Windows and also on the iPad.

It doesn't work in IE 9 and while it works in Firefox 3.6, it doesn't work in Firefox 4.0.

What seems to happen when it isn't working is the whole canvas gets erased, not just the area in the rect I pass to drawImage.

I think this is a bug in IE 9 and firefox 4.0 but should I not expect it to work?

Answer 1

These are the images of what Mozilla is assuming the Canvas is supposed to work:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing#globalCompositeOperation

The problem is that the spec is written rather vaguely here. For example, for the copy composite type, it reads:

Display the source image instead of the destination image.

Which could be taken to be a synonym of source-over, or it could be taken to mean "clear the entire canvas and then copy the new drawing operation onto the canvas"

To see how the different browsers differ in their implementations, use the images provided by mozilla above with this live-firing (not images, canvases) of all the different composite shapes that has also provided by Mozilla:

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Just looking quickly it seems that Chrome 11 disagrees with Firefox 4 on source-in, source-out, destination-in, destination-atop, darker, and copy.

It seems at a glance that the thing to note is that all of the differences are related to whether the non-pertinent pixels should be cleared or not. Mozilla seems to think so, Google does not.

Answer 2

When you use drawImage() with globalCompositeOperation="copy", it's unexpected that the canvas is cleared outside the destination rectangle. But this seems to be the consensus of how to interpret the standard. Even with fillRect() or when drawing a line, the whole canvas is cleared. You have to set a clipping region to prevent that.

For a discussion see: https://bugzilla.mozilla.org/show_bug.cgi?id=366283