How to set HTML5 canvas size to match display size in device pixels

Question

Is it possible to set the size of the bitmap in an HTML5 canvas so that it exactly matches the display size in device pixels, ie the number of physical pixels used to display the canvas, even when window.devicePixelRatio is not an integer?

There is a good description of how to resize the canvas on webglfundamentals but it does not properly handle non-integer devicePixelRatios. My understanding so far:

The display size of the canvas is set in CSS with, eg, canvas {width: 200px;}.
The underlying bitmap size is set with, eg, <canvas width="100"/> in HTML or canvas.width = 100 in JS.
The bitmap will be stretched to fit the CSS size (how is affected by object-fit and object-position).
We can set bitmap size to be equal to some expression involving canvas.clientWidth.
canvas.clientWidth is an integer and its unit are CSS pixels and is the calculated width of the content (plus padding). I don't know if the browsers actually draw the content into a whole number of CSS pixels or a whole number of device pixels.

So webglfundamentals suggests something like

canvas.width = Math.floor(canvas.clientWidth * window.devicePixelRatio);

but if window.devicePixelRatio is a fraction, this sometimes doesn't work (2 pixel wide lines drawn on integer coordinates are fuzzy). My 1920x1080 screen has devicePixelRatio of 1.5 by default, and page zoom can affects this, so lots of reasons why devicePixelRatio is not an integer as a rule. What can we do?

`window.devicePixelRatio` will never be an integer, according to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio): A double-precision floating-point value — Jack Bashford, Nov 09 '18 at 20:57
@JackBashford I think that he meant a natural number and not a fraction — NielsNet, Nov 09 '18 at 21:28
Can you not just set the canvas width and height to 100% using CSS? — Jonathan, Nov 10 '18 at 17:26
Jonathan, no that only affects the display size without any regard to the bitmap size. — user2357, Nov 11 '18 at 00:18

score 0 · Answer 1 · answered Nov 10 '18 at 17:20

1px is a logical length unit in CSS/DOM realm. Dot.

So I don't think that you will find reliable method for getting physical pixels. Check this.

That's why in Sciter I've made px units to represent always physical pixels of the device. And introduced dip units that are logical pixels - 1/96 of inch measured by the ruler on device surface (so 1dip ~ 1px of W3C CSS).

I simply do not understand how to do serious UI development without the ability to define objects in device pixels.

Thanks for replying as a UI authority and for the link to the well-seen question. I'll still leave the question open for a bit. — user2357, Nov 11 '18 at 00:17

How to set HTML5 canvas size to match display size in device pixels

1 Answers1