Yonatan Zuleta Ochoa Yonatan Zuleta Ochoa - 5 months ago 15
CSS Question

How can I stack two same-sized canvas on top of each other, next to another canvas?

I been trying to get two same-sized canvas on top of each other and next to another canvas. Lets see, in the figure below I want 2 and 3 in the same place, next to 1.
enter image description here

I have tried to solve this problem with the following code:



#plotCanvas {
background-color: #fff;
position: relative;
top: 0px;
left: 0px;
}

#plotCanvas_BG {
background-color: #fff;
position: absolute;
top: 329px;
left: 352px;
background-color: transparent;
}

<div style="width: 810px; margin-left: auto; margin-right: auto;">
<canvas width="350" height="350" id="imageCanvas" style="float: left; border: 1px solid black;"></canvas>
<canvas width="350" height="350" id="plotCanvas" style="margin-left: 6px; border: 1px solid black;"></canvas>
<canvas width="350" height="350" id="plotCanvas_BG" style="margin-left: 6px; border: 1px solid black;"></canvas>
</div>





As you can see, I have set the position of the canvas 3 (which corresponds to "plotCanvas_BG") manually. However, the disadvantage is that the position of the canvas 3 is different depending on the web browser and if the size of the web page change, then the position also changes.

Answer

Use a container div that is positioned relative that will contain the canvas elements positioned absolute.

<div style="width: 810px; margin-left: auto; margin-right: auto;">
  <canvas width="350" height="350" id="imageCanvas" style="float: left; border: 1px solid black;"></canvas>
  <div class="container">
    <canvas width="350" height="350" id="plotCanvas" style="margin-left: 6px; border: 1px solid black;"></canvas>
    <canvas width="350" height="350" id="plotCanvas_BG" style="margin-left: 6px; border: 1px solid black;"></canvas>
  </div>
</div>

CSS

.container {
  display: inline-block;
  position: relative;
  float: left;
}

#plotCanvas,
#plotCanvas_BG {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

#plotCanvas {
  background-color: #fff;
}

JSFiddle Demo: https://jsfiddle.net/8c8csnzk/1/