html - Combining two or more Canvas elements with some sort of blending

Question

Is it possible to combine the contents of 2 separate canvas elements into a single canvas element?

Something like an equivalent of 'Flattening' two or more layers in Photoshop...?

I can think of a round about way, but am not so sure about it. I export the contents of both the canvi (lol) in the form of .png's, and then have a third canvas element draw both images with some sort of blending algorithm (xor, blend, negative, etc.).

Answer 1

Of course you can, and you don't need any funny libraries or anything, just call drawImage with a canvas as the image.

Here is an example where I combine two canvas elements onto a third:

http://jsfiddle.net/bnwpS/878/

Of course you can do it with just two (one onto the other), but three makes for a better example.

You can always change the globalCompositeOperation if you want an XOR effect or something.