threejs: how to set renderer size to fit screen?

Question

Using code below I have some problems:

        //WebGL renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size   
        document.body.appendChild(renderer.domElement);

Top left corner - some thin white border:

Bottom right corner - scroll elements (looks like window.innerWidth, window.innerHeight is bigger then initial view):

How to get w,h for renderer.setSize to fit all visible area inside window? Or maybe this problems should be fixed in other way?

Answer 1

the white space at the top and left is because I think the body has a margin by default.
The scrollbars are because for reasons unknown to me, the canvas element behaves as if it is an inline element.

This css should fix it:

body {
  margin: 0px;
  overflow: hidden;
}
canvas {
  display: block;
}