I have been trying to place 3 canvases side-by-side and one on the bottom. I am able to get 3 side-by-side, but I am not able to follow the total configuration. I also need to place canvases on one line so that there is no spacing between each canvas. The layout looks like this:

Post image

Each color represents a difference canvas.

This is what I have so far for the 3 side-by-side, but I cannot even see the bottom canvas.

<div id=”canvas-container”>

<canvas width=30 height=250 class=’part’ id=”canvas-left”></canvas>

<canvas class=’part’ width=250 height=250 id=”canvas-main”></canvas>

<canvas width=30 height=250 class=’part’ id=”canvas-right”></canvas>

<canvas width=250 height=30 class=’part’ id=”canvas-bottom”></canvas>

</div>

.part{position:absolute;}

#canvas-left{left:0;border:1px solid green;}

#canvas-main{left:30px;border:1px solid red;}

#canvas-right{left:280px;border:1px solid blue;};

#canvas-bottom{left:30px;border:1px solid purple;}

The center canvas is interactive, so I want to use these side canvases to add labels to each item.

Any idea how I can do this?



Source link

Write A Comment