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:

var can = document.getElementById('canvas1'); var ctx = can.getContext('2d');  ctx.fillStyle = 'rgba(255,0,0,.4)'; ctx.fillRect(20, 20, 20, 80); ctx.fillStyle = 'rgba(205,255,23,.4)'; ctx.fillRect(30, 30, 40, 50); ctx.fillStyle = 'rgba(5,255,0,.4)'; ctx.fillRect(40, 50, 80, 20);  var can2 = document.getElementById('canvas2'); var ctx2 = can2.getContext('2d');  ctx2.beginPath(); ctx2.fillStyle = "pink"; ctx2.arc(50, 50, 50, 0, Math.PI * 2, 1); ctx2.fill(); ctx2.beginPath(); ctx2.clearRect(20, 40, 60, 20);  var can3 = document.getElementById('canvas3'); var ctx3 = can3.getContext('2d');  ctx3.drawImage(can, 0, 0); ctx3.drawImage(can2, 0, 0);

<canvas id="canvas1" width="200" height="200" style="border: 1px solid black"></canvas> <canvas id="canvas2" width="200" height="200" style="border: 1px solid black"></canvas> <canvas id="canvas3" width="200" height="200" style="border: 1px solid black"></canvas>

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.