Canvas must have display block when the width is 100vw and the height is 100vh

Question

Why i must add display: block when my canvas is full page. When i don't add it the canvas size is more although the width and height has same value.

Thanks.

Answer 1

Canvas is an inline element by default, if there is enough space in browser then sibling element will be display on the same row (See below example)

#myCanvas2 {
  width: 100vw;
  height: 100vh;
}

<!--With specific width-->
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<span>This text will display with canvas in row, because there is enough space</span>

<br><br>
<!--With full width-->
<canvas id="myCanvas2" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<span>This text will display below canvas as there is not enough space</span>

If you have canvas with specific width and don't want any element to be on same row, you have to add display: block

Hope I answered your question:)