使用 window.innerWidth 和 window.innerHeight 使滚动条出现

Question

I'm trying to make a simple canvas that stretches itself to fully fill the viewport, but I don't want scrollbars to appear, a thing that happens if I try to resize the canvas in JS using window.innerWidth and window.innerHeight .

Note: I don't want to resize the canvas in CSS because the elements inside get all stretched out since from what I've understood the CSS treats the canvas as an img, and doesn't actually stretch the resolution of the canvas.

This is what happens: This is the code: css:

    html,
body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

/*canvas*/
#bg {
    background: #171629;
}

js:

ctx.beginPath()
ctx.canvas.width  =  window.innerWidth
ctx.canvas.height = window.innerHeight


ctx.rect(20, 40, 50, 50)
ctx.fillStyle = "#e5e5e5"
ctx.fill()
ctx.closePath()

Answer 1

After a bunch of trying I found this as a solution:

css:

html,
body {
  display:flex;
  margin:0;
  padding:0;
}

js:

canvasElement.height = window.innerHeight;
canvasElement.width = document.body.clientWidth;

Answer 2

You can also use:

css:

body {
   margin: 0;
   overflow: hidden;
}

Answer 3

In fact, My problem was when I typed

<style type="text/csss">
  body{
      margin:0;
      overflow:hidden;
  }
  canvas{
      background-color:lightblue;
  }</style>

instead of:

<style type="text/css">
  body{
      margin:0;
      overflow:hidden;
  }
  canvas{
      background-color:lightblue;
  } </style>

a tiny grammatical mistake can make you suffer a lot