Why canvas width and style width are different?

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:
screen shot 2018-07-26 at 2 32 51 pm

Is this behavior intended?

Three.js version
  • Dev
  • [ x ] r94
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

2017 Macbook Pros

Author: Fantashit

1 thought on “Why canvas width and style width are different?

  1. 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 2×2 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.

Comments are closed.