Canvas takes up space of parent div-CodePudding

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!

CodePudding user response：

you can remove <div>test</div>

CodePudding user response：

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.