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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…