Three.js: Why canvas width and style width are different?

[Marviel]

Description of the problem

In several of the examples:
https://threejs.org/examples/#webgl_materials_wireframe
https://threejs.org/examples/#webgl_materials_variations_toon
https://threejs.org/examples/#webgl_materials_nodes
(And presumably several more, though I am not inclined to test them all :)

I notice that the WebGLRenderer canvas has an odd sizing mechanism. I'm not even close to a CSS expert, but my coworkers and I were mildly confused to see two widths and heights being specified in different ways.

I've attached a picture of the chrome devtools analysis of the canvas, to show you what I'm talking about:

Is this behavior intended?

Three.js version

• [ ] Dev
• [ x ] r94
• [ ] ...

Browser

• [ ] All of them
• [x] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [ ] All of them
• [ ] Windows
• [x] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

2017 Macbook Pros

[mrdoob]

Is this behavior intended?

Yes. That's because retina/hdpi displays.

Open your console and type window.devicePixelRatio. On my Macbook Pro I get 2. That means that, for each "HTML Pixel" the screen is rendering 2x2 pixels (4). If you want this to look crisp on these displays you need to take that pixel ratio into account and create a canvas n times the size.

I know, this is not the best explanation, but hopefully this explanation should serve as a starting point for you to study further.

[Marviel]

Oh wow. Thanks, TIL!

On Thu, Jul 26, 2018 at 3:28 PM Mr.doob [e-mail] wrote:

Is this behavior intended?

Yes. That's because retina/hdpi displays.

Open your console and type window.devicePixelRatio. On my Macbook Pro I
get 2. That means that, for each "HTML Pixel" the screen is rendering
2x2. If you want this to look crisp on these displays you need to take that
pixel ratio into account and create a canvas n times the size.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mrdoob/three.js/issues/14563#issuecomment-408208663,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AB8VrWP3mhHHQjBLvtx5E13E6Jcmt_Haks5uKhhigaJpZM4ViWCT
.