question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas does not respect window.devicePixelRatio

See original GitHub issue

Sandcastle example: any

Browser: Chrome

Operating System: Windows 7

I have a device pixel ratio of 1.25 when i add the CSS

.cesium-widget canvas {
    width: 100px;
    height: 100px;
}

The canvas’ width and height get set to 100, but it should be getting set to 125.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
lilleysecommented, Mar 25, 2020

This behavior changed in 1.66. To get the previous behavior back set

viewer.useBrowserRecommendedResolution = false

From the 1.66 change log:

  • useBrowserRecommendedResolution flag in Viewer and CesiumWidget now defaults to true. This ensures Cesium rendering is fast and smooth by default across all devices. Set it to false to always render at native device resolution instead at the cost of performance on under-powered devices. #8548
0reactions
OmarShehatacommented, Mar 25, 2020

Closing since this change was intentional.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Window.devicePixelRatio - Web APIs | MDN
The devicePixelRatio of Window interface returns the ratio of the resolution in ... A <canvas> can appear too blurry on retina screens.
Read more >
Virtual tabletop doesn't respect devicePixelRatio. Results in ...
The easy part of resolving this is to set a CSS width and height on the canvas, as well as computing width and...
Read more >
javascript - devicePixelRatio on Chrome for Android affecting ...
Does anyone have a more consistent fix for generally scaling a canvas context so it respects device pixel ratio, but doesn't break some ......
Read more >
Pixel-perfect rendering with devicePixelContentBox - web.dev
To summarize: Canvas elements have a given size to define the area that you can draw on. The number of canvas pixels is...
Read more >
Responsive Charts - Chart.js
width and .height ) can not be expressed with relative values, contrary to the display size ( canvas.style.width and .height ) ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found