1

I need to display one HTML5 canvas on top of another. This I have already managed in the following manner:

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

However, I can't seem to figure out how to CENTER these two canvases while keeping one on top of the other. Any ideas?

soystuff
  • 23
  • 3

3 Answers3

3

Put them inside of a <div> with the styling:

div#canvasContainerId {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}
  • The position: relative causes the absolute positioning of the <canvas>es to become relative to their containing <div>.
  • The auto margins, along with a fixed width, center the <div>.
apsillers
  • 112,806
  • 17
  • 235
  • 239
1

Make an outer container with text-align:center and position:relative, make an inner container with position:relative, put the canvases inside the inner container, remove left:0;top:0; on both canvases, and remove the position:absolute on the lower of the canvases. And make sure in the html that the lower canvas comes before the upper canvas, like you have.

#container {
  text-align:center;
  position:relative;
}

#inner_container{
  position:relative;
}
#upper {
  z-index: 1;
}
#lower {
  position:absolute; z-index: 0;
}

http://jsfiddle.net/NW6Fx/

Edit: I believe the z-index property isn't needed if you do it this way. The order is just a matter of which canvas comes first in the html and which is position:relative.

Samuel Reid
  • 1,756
  • 12
  • 22
0

You can put a breakline between them <br/>

or

Might try to give each of them the following css:

{
    margin:auto;
    clear:both;
}

With absolute positioning you should use top. For the first one, for example, put top: 50px. That will move the first elements 50px away from the top. For the second one, put top: 100px.

Euphe
  • 3,531
  • 6
  • 39
  • 69
  • Thanks for the help, everybody. For a number of reasons, I ended up just using jQuery to calculate the center of the screen. Then, I also used it adjust the CSS properties of the canvases, but I left the position as absolute. – soystuff Jul 17 '13 at 21:59