I have a design conundrum in my app where I am using multiple stacked HTML canvas elements for drawing. My goal is to make the canvases fit perfectly within their containing div while also maintaining a left and bottom margin.
This is how my HTML structure looks like:
<body>
<div>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
</body>
Here's the corresponding CSS code:
div {
position: relative;
width: 500px;
height: 500px;
border: 2px solid black;
}
canvas {
position: absolute;
top: 0;
right: 0;
border: 2px solid blue;
margin-left: 10px;
margin-bottom: 10px;
}
The desired outcome should resemble this image:
https://i.stack.imgur.com/i6dgV.png
If you have any suggestions or solutions, I would greatly appreciate it. Thank you!