CSS not working with setting canvas size?

Question

I am unsure as to why the following css in this html:

<!DOCTYPE html>
<html>
    <head>
        <title>Three.js</title>
        <style>
            body {
                margin: 0;
            }
            canvas {
                display: block;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <script src = "three.js"></script>
        <script src = "script.js"></script>
    </body>
</html>

does not seem to affect script.js:

var resolutionDivisor = 2;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

render();

I am trying to make three.js render at half of the screen resolution, to increase rendering speed, and use CSS to stretch the canvas to the screen size, but the CSS does not seem to affect the canvas, so the canvas does not take up the full screen.

I am using Google Chrome.

A download can be found here.

You have to add information. Where is your HTML and the rest of the CSS? — Alex, Feb 10 '15 at 20:53
You must set your canvas size with javascript. CSS is not going to give the right effect. — Daniel, Feb 10 '15 at 20:53
This might help you: http://stackoverflow.com/questions/5034529/size-of-html5-canvas-via-css-versus-element-attributes — blex, Feb 10 '15 at 20:55
@Daniel I need to use CSS because I need the 'stretching' effect, so I can get faster renders. — Adam C, Feb 10 '15 at 21:13
Are you able to add a jsfiddle? Does the canvas not take up the full screen? — Brendan Annable, Feb 10 '15 at 21:32
@BrendanAnnable The canvas does not take up the full screen, sorry if this was unclear. — Adam C, Feb 11 '15 at 18:58

score 4 · Accepted Answer · answered Feb 11 '15 at 20:02

The problem was that you were setting the renderer size as shown below.

renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);

So your canvas would always render at half the height and width of the body.

Additionally, canvas works by placing width/height attributes on the canvas element itself. A hacky/incomplete work around using !important can be found here http://jsfiddle.net/thewolff/3onsp221/2/.

But really you should be updating the width/height on window resize to keep the porportions accurate.

CSS not working with setting canvas size?

1 Answers1