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.

I think this section should be removed or heavily edited.