Home Display pixel-perfect canvas on all devices

# Display pixel-perfect canvas on all devices

Max
1#
Max Published in 2017-12-07 14:12:37Z
 I have some canvases that I want to be displayed pixel-perfect in every (modern) browser. By default, devices with high-DPI screens are scaling my page so that everything looks the right size, but it's breaking* the appearance of my canvases. How can I ensure that one pixel in my canvas = one pixel on the screen? Preferably this wouldn't affect other elements on the page, since I still want e.g. text to be scaled appropriately for the device. I already tried styling the canvas dimensions based on window.devicePixelRatio. That makes the canvases the right size but the contents look even worse. I'm guessing that just scales them down after they're already scaled up incorrectly. *If you care, because the canvases use dithering and the browsers are doing some kind of lerp rather than nearest-neighbor
Max
2#
 It's easy: canvas { image-rendering: pixelated; }  Browser support isn't great, but so far it's worked on all of the modern browsers I've tested, so I'm happy. This has no effect on normal DPI devices as long as your canvases are being displayed at their normal size. Also, depending on the screen, you get interesting artifacts on high DPI devices, but I think that's unavoidable due to how those displays work. They're still better than the artifacts you get without the style. I also tried upscaling all of my canvases 200% with nearest-neighbor in javascript and then setting them as background images of normal-sized divs. This is how Apple recommends displaying images for retina devices, so I thought it would give a great result. But you still end up with artifacts and they aren't fixed by zooming in the page so it's actually worse that the simple one above.