How Can I Stack Two Same-sized Canvas On Top Of Each Other?

Below is le code. I want movementCanvas underneath canvas.

Solution 1:

Use CSS's position: absolute. Add the following CSS to your page:

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

This will put both canvases at the same spot: the topleft-most part.

You might want to put them in a wrapper element, which will need to be position: relative in order for its child elements to be. For example, your HTML will look something like this:

<divclass="wrapper"><canvasid="canvas1"width="400"height="300"></canvas><canvasid="canvas2"width="400"height="300"></canvas></div>

And your CSS will look like this:

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrappercanvas {
    position: absolute;
    top: 0;
    left: 0;
}

Then position the wrapper div however you'd position the other stuff.