Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png
Attempting to address this issue 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>The positioning of canvas 3 ("plotCanvas_BG") has been manually set as shown. However, a drawback is that its position may vary across different web browsers and when the webpage size changes.