Home/ Questions/Q 7512999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:02:42+00:00

I made a page, where the canvas should fill the window. It works, but

  • 0

I made a page, where the canvas should fill the window. It works, but for some reason scrollbars appear. I don’t know, what is the error.

<!doctype html>
<html>

  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style type="text/css">
      #canvas {
        background-color: #EEEEEE;
      }
      * {
        margin: 0px;
      }
    </style>
    <script type="text/javascript">
      function getSize() {
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
          //Non-IE
          myWidth = window.innerWidth;
          myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
          myWidth = document.documentElement.clientWidth;
          myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth ||          document.body.clientHeight ) ) {
          //IE 4 compatible
          myWidth = document.body.clientWidth;
          myHeight = document.body.clientHeight;
        }
        return {x:myWidth,y:myHeight};
      }

      window.onload = function () {
        canvas = document.getElementById('canvas');
        var size = getSize();
        canvas.width = size.x;
        canvas.height = size.y;
      };
    </script>
  </head>

  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
  </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Switching #canvas to a block did the trick for me:

    #canvas {
    display: block;
    background-color: #EEEEEE;
}
    • 0