Adobe Creative Cloud

HiDPI/Retina Screen Support for HTML5 Canvas Documents

Fluid and responsive content that scales according to the size of the device screen on which it is being viewed is critical for usability. Finding out the best way to do it has always been tricky, given the wide variety of screen sizes and devices in use and the solutions that exist. Kevin Newman of unFocus Projects recommends a method that he has successfully implemented using devicePixelRatio to match the width and height attributes of the HTML5 canvas element with the pixel ratio of the display device. Adding HiDPI and Retina screen support to an HTML5 Canvas document is as easy as just adding a piece of code once the stage is defined in your published HTML file. Read Kevin’s blog post to learn about how to do it!

To see how it works, check out this page where Kevin has applied this trick.

General, HTML5, Retina Display