0
187
ViewsCanvas takes up space of parent div
I've done a lot of searching, but I am unable to solve this problem I'm having.
I have a canvas nested in a div, with the intention of having the div serve as the background for the canvas, so that I can draw objects on it and whatnot.
When I run my code, the canvas appears side by side with the div, and I am unsure what to change to fix it.
// html
<body>
<div id="root">
<div id='board'>
<div>test</div>
<canvas></canvas>
</div>
</div>
</body>
// css
#board {
position: relative;
display: flex;
width: 640px;
height: 640px;
}
// js
let canvas = document.querySelector('canvas')
let ctx = canvas.getContext('2d')
canvas.width = canvas.offsetWidth
canvas.height = canvas.offsetHeight
Looked up similar questions on here with little success. Insight would be very appreciated!
·
Juan Pablo Isaza
1 answers
Answer question0
You can add this styling for example, to center your canvas and then add more items as you need to the background div.
canvas {
background-color: green;
width: 200px;
height: 200px;
align-self: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
I added an image of the result.
·
Juan Pablo Isaza
Report
Answer question