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.).
You could with css position 2 (or more) canvases over each other and let each work as a layer. Im not sure Exactly how to do this with css, but i've done something similar, have to canvases over eachother, one for 2d-content and one for webgl and the user could easily swap between them
<div height="640" style="position: absolute;">
<canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
<canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>
I guess that code is not bullet proff nor correct, but it works. Hope this helps.
If it doesnt I would use the workaround you mentioned. (I actually made a app like that where I drew 2d shadows to an offscreen canvas and drew it over the main canvas with transparency, looked pretty neat)