What is the difference between canvas.width and canvas.clientWidth

user_1584421 0
Viewed 1305

I am learning three.js and in one example, the author creates a canvas element and then binds the renderer to that canvas element.

 <canvas id="c">
 </canvas>

const renderer = new THREE.WebGLRenderer({canvas});

Then he gets the canvas element and stores it to a variable with canvas = renderer.domElement;

What is the difference between canvas.width and canvas.clientWidth?

three.js canvas dom javascript
1 Answers

The difference comes from the HTMLCanvasElement (<canvas/>) specification. The width property is specific to HTMLCanvasElement, and represents "number of logical pixels" stored by one row of the canvas. On the other hand, the clientWidth property is common to all Elements and represents the number of pixels horizontally occupied by the canvas. These need not be the same — for example, it's common to draw into a canvas at higher or lower resolution than the space it occupies on the page, in order to improve performance or to support a devicePixelRatio >1, such as a high-density display.

user_13147620
Related