title: Problems using clientHeight/Width when defining canvas
body: <p>I am starting a small javascript project and I want to define a canvas to be the user's viewport size, so clientHeight/Width</p>
  
  <p><a href="https://i.stack.imgur.com/ks83B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ks83B.png" alt="enter image description here"></a> </p>
  
  <p>However when I use this methods:</p>
  
  <pre><code>&lt;canvas id="myCanvas" style="border:1px solid #d3d3d3;"&gt;
  &lt;/canvas&gt;
  
  &lt;script&gt;
  
      myCanvas.height = document.documentElement.clientHeight;
      myCanvas.width = document.documentElement.clientWidth;
      console.log(screen.height);
  
  
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.fillRect(20,20,150,100);
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My canvas is just a little too big for the screen so there are scrollbars
  as you can see here <a href="https://i.stack.imgur.com/XdZom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XdZom.png" alt="enter image description here"></a></p>
  
  <p>So how exactly should I make the canvas exactly the clients size? Thanks</p>