CODEWITHSUNDEEP
htmlcanvas
Ryan Peschel
Ryan Peschel

Reputation: 11848

How to place two canvases on top of one another?

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.

Upvotes: 4

Views: 9362

Answers (2)

Searle
Searle

Reputation: 987

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>

Upvotes: 7

user187228
user187228

Reputation:

Make sure to add position: relative to the containing div in order to position the canvas elements absolutely within it.

Upvotes: 2

Related Questions