Multiple HTML5 canvas on one page

Question

So I have a canvas which I want to draw multiple images onto and then layer them, so; first image would have opacity: 0.5; image two would have opacity: 0.7 and then third being opacity: 0.3;. My question.

Should I have multiple canvas elements on one page and then position: absolute; them on top of each other or try something else?

Just wondering A. Performance and B. is this semantically correct? Thanks.

Answer 1

You can draw the images in the same canvas.
Just change the .globalAlpha property before drawing the image.

ctx.save();
ctx.globalAlpha = 0.8;
ctx.drawImage(image1, 0, 0);
ctx.restore();

ctx.save();
ctx.globalAlpha = 0.3;
ctx.drawImage(image2, 0, 0);
ctx.restore();

ctx.save();
ctx.globalAlpha = 0.5;
ctx.drawImage(image3, 0, 0);
ctx.restore();

//...

fiddle