CODEWITHSUNDEEP
csshtmlcanvas
Yonatan Zuleta Ochoa
Yonatan Zuleta Ochoa

Reputation: 13

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.

Upvotes: 0

Views: 212

Answers (2)

Miguel
Miguel

Reputation: 20633

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/

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

Increase width of div 

    <div style="width: 1150px; margin-left: auto; margin-right: auto;">
div canvas{
  display:inline-block;
}

http://codepen.io/nagasai/pen/XKprww

Upvotes: 1

Related Questions