HTML Canvas is Oversizing

Question

I have a canvas that I want to stay within the bounds of my body which is "container-fluid". Currently, the canvas is rendering larger than the actual window height/width causing scrollbars to appear. My topNav bar stays within the confines just fine but the canvas exceeds the bounds?

HTML

<body class="container-fluid">

    <ul class="topNav" id="topNavbar">
        <li><a href="#">Home</a></li>
        <li><a href="#">3D Observatory</a></li>
        <li><a href="#">News</a></li>
        <li class="icon">
            <a href="javascript:void(0);" onclick="transformNavbar()">☰</a>
        </li>
    </ul>
    <canvas id="spaceCanvas" onload="init()">
    </canvas>
        <script src="js/SolarSystem.js" rel="script"></script>
</body>

JS

function init() {

    //renderer
    renderer = new THREE.WebGLRenderer( { canvas : spaceCanvas} );
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.renderReverseSided = false;

    mainCamera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.0001, 20000 );
    var ambLight = new THREE.PointLight( 0x222222 );
    mainCamera.position.z = 2.25;
    mainScene = new THREE.Scene();
    //Lighting
    ambLight.position.set(0,0,0);
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set(5,3,5);
    light.castShadow = true;
    light.shadow.camera.near = 25;
    light.shadow.camera.far = 200;
    light.shadow.camera.left = -50;
    light.shadow.camera.right =  50;
    light.shadow.camera.top =  50;
    light.shadow.camera.bottom = -50;
    light.shadow.bias = 0.001;
    light.shadow.mapSize.width = 2048;
    light.shadow.mapSize.height = 2048;
    light.visible = true;

    mainScene.add(mainCamera, light, ambLight);
    window.addEventListener( 'resize', onWindowResize, false);


    render();
}
function animate() {
    render();
    requestAnimationFrame( animate );
    controls.update();
}
function render() {
    mainCamera.lookAt(mainScene.position);
    renderer.autoClear = false;
    renderer.clear();
    renderer.render( mainScene, mainCamera);
}
function onWindowResize() {
    mainCamera.aspect = window.innerWidth / window.innerHeight;
    mainCamera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
    render();

}

and as you can see is oversized in the window:

@MosesDavidowitz I was not using css to size the canvas/renderer because it messes with the image and stretches things in unwanted ways. The only css I have is for the menu bar at the top. I am using bootstrap if that helps — Gabriel_W, Feb 01 '17 at 22:56
I thought that the renderer.setSize(window.innerWidth, window.Innerheight) would take care of this for me — Gabriel_W, Feb 01 '17 at 22:57
@MosesDavidowitz so you jogged my memory and I added overflow: hidden to the canvas in css and voila! Thanks! — Gabriel_W, Feb 01 '17 at 23:01
@Gabriel, your real problem is here : http://stackoverflow.com/questions/13127887/html-default-body-margin — Kaiido, Feb 02 '17 at 01:59

score 1 · Accepted Answer · answered Feb 02 '17 at 00:40

1

You can add this to your body's css code :

 overflow: hidden;

answered Feb 02 '17 at 00:40

Fady Sadek

1,091
1
13
22

HTML Canvas is Oversizing

1 Answers1