How can I stack two same-sized canvas on top of each other?

Question

Below is le code. I want movementCanvas underneath canvas.

Answer 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:

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

And your CSS will look like this:

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

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

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