Home Display pixel-perfect canvas on all devices
Reply: 0

Display pixel-perfect canvas on all devices

user862 Published in March 24, 2018, 12:37 am

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

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.239009 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO