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()

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()

• javascript
• html
• canvas
• viewport

• 2 ctx.canvas.height = window.innerWidth - well, you meant innerHeight, right? – Oen44 Commented Dec 10, 2018 at 13:18
• 1 You forgot to set padding: 0 to html, body { – Kosh Commented Dec 10, 2018 at 13:27
• I agree with @Oen44: it must be ctx.canvas.height = window.innerHeight . If so you may want to use body{width:100vw; height:100vh;overflow:hidden;} – enxaneta Commented Dec 10, 2018 at 14:55
• Yeah I meant innerHeight, still that wasn't the problem – iLikeKFC Commented Dec 12, 2018 at 12:18
• Can you provide an example we can play with? your problem probably is that it's just a bit bigger than 100% so it shows the scrollbar. You can try add overflow:none to the css but it's not really fixing the problem rather than just sweeping it under the carpet – Haim Houri Commented Dec 12, 2018 at 12:23

4 Answers 4

This is an old question but still doesn't have any correct answer, so I will post my answer here for anyone looking for a solution.

If you want to get rid of the scrollbars when setting canvas width/height to the window's width/height just display canvas as block:

  * { 
    margin:0; 
    padding:0; 
  }
  canvas {  
    display: block;  /* <---- As simple as that */
  }

You're wele ;)

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;

You can also use:

css:

body {
   margin: 0;
   overflow: hidden;
}

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