How to place two canvases on top of one another?

canvas, html

Solution

Do this:

<style>
    #container { position: relative; }
    .canvas { position: absolute; top: 0; left: 0; }
</style>

<div id="container">
    <canvas class="canvas" id="canvas1"></canvas>
    <canvas class="canvas" id="canvas2"></canvas>
</div>

Problem

I found similar topics but they all used absolute positioning which placed the canvases at the top left of the page. I have them contained within a div but I'm not sure exactly how to get them to layer properly. I tried using absolute and relative positioning in CSS but I wasn't having any luck.

Original source