Search code examples
javascripthtmlhtml5-canvaspositionscrollbar

Why are there scroll bars despite fitting a canvas exactly to the screen

I have a page with exactly one visible element: a canvas. I am setting the canvas' width & height to be exactly the width and height of the window (window.innerWidth and window.innerHeight), however horizontal and vertical scroll bars still appear and allow me to scroll around a very small amount. None of my elements have any border, padding, or margin (including body, which I specifically set to have none). Is there a better way to make a canvas take up the entire screen, or should I simply subtract a fixed amount from the width & height, and what would that be?

Solution

  • Add style with overflow of hidden.

    <style>
body {
  overflow: hidden;
}
</style>