Talk:HandlingHighDPI

The method described on this wiki page does not work for me with Safari. I'm using 6.0.2 with WebGL enabled through the Developer menu. Anyone know of a work around?

The page shows the following:-

<canvas width="111" height="222" style="width: 333px; height: 444px;"></canvas>

When I view the demo it is the other way around.

Non DPI aware canvas

<canvas width="512" height="512" style="width: 512px; height: 512px;"></canvas>

DPI aware canvas

<canvas width="1024" height="1024" style="width: 512px; height: 512px;"></canvas>

So the buffer canvas is larger than the css canvas.

QuentinUK (talk) 14:21, 12 March 2015 (UTC)

The Moire and Pixel-Snapping section seems off to me

AFAIK there is no computation you can do that will give you the correct size of the canvas in device pixels

You have to use ResizeObserver and check devicePixelContentBoxSize

If you have evidence otherwise maybe you could post a working example that works in all cases?

To test, try a canvas in a 2 child flexbox, set the childen to take 50% size, set the flexbox to be 50% size. Be sure to zoom (Ctrl/Cmd-+/-) so that you get fractional devicePixelRatios.

To be more clear, if you have parent that is 99 device pixels wide, and 2 children set to 50%, when you call getBoundingClientRect it will return the exact same fractional size for both children but when the 2 children are actually rendererd, on will get 49 device pixels and one will get 50 device pixels. There's no way to know which of the 2 should round up vs round down.

I think this section should be removed or heavily edited.