How to get canvas size to take devicePixelRatio into account?

[dangrabcad]

It's recommended to make the canvas width and height be the true height and width in real pixels, and use CSS styles to set the canvas' width and height in CSS pixels. This enables 1:1 pixel accurate rendering on high-dpi displays, and removes the need for the browser to scale the canvas to true pixels. R3F's canvas doesn't behave this way: it sizes the canvas in CSS pixels, so users of high-dpi screens don't get the benefit. There doesn't seem to be anything I can set in the react-use-measure options to change the resizing behavior in this way.

How can I get my R3F canvas to resize with its container and be the correct height and width in real pixels?

[drcmda]

you can set pixelratio via

<Canvas pixelRatio={window.devicePixelRatio} />

but better

<Canvas pixelRatio={[1, 2]} />

which constrains it to go no lower than one and no higher than 2 (some mobile displays go up to 4 which could be too slow due to the sheer amount of pixels.

the difference between canvas pixel size and viewport size can be calculated by

const { gl, viewport, size } = useThree()

// gl.getPixelRatio()
// viewport -> size in three units
// size -> size in pixels