CODEWITHSUNDEEP
three.js
Jinceon
Jinceon

Reputation: 1342

why threejs change my canvas size 2x?

#designer {
        height: 480px;
        width: 640px;
    }
var designer = document.getElementById('designer');

var renderer = new THREE.WebGLRenderer({alpha: true,preserveDrawingBuffer: true});
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(designer.clientWidth, designer.clientHeight);
    designer.appendChild(renderer.domElement);

browser showes the html code like below:

 <canvas width="1280" height="960" style="width: 640px; height: 480px;"></canvas>

why?

Upvotes: 0

Views: 333

Answers (1)

WestLangley
WestLangley

Reputation: 104783

In three.js r.70, when you call the method

renderer.setSize( width, height );

the renderer.domElement logical canvas dimensions are scaled by the pixelRatio you previously set when you called

renderer.setPixelRatio( window.devicePixelRatio ).

The canvas.style dimensions are, unchanged.

This is different behavior than in prior versions of the three.js library.

three.js r.70

Upvotes: 3

Related Questions