While creating some HTML5 canvas interactives for use within an iBook publication recently, I noticed that when I viewed the HTML on the iPad 2 (in safari), all of  the content within the canvas elements looked a whole lot less sharp than everything else on the page. I figured this was a bit too crap to deliver and, reasoning there had to be a solution out there, I had a little snoop around.

It turns out there are two properties; webkitBackingStorePixelRatio and devicePixelRatio that you can use to fix this issue. (props to HTML5 Rocks’ in-depth article)

webkitBackingStorePixelRatio basically tells us the pixel density for the canvas element and is found on the canvas’ context:

whereas devicePixelRatio tells us the pixel density of the device’s screen.

If  the backingStorePixelRatio is less than the devicePixelRatio, then anything you draw in the canvas will need to be scaled up.

Lastly, just remember that these are logical sizes within the canvas element and not the actual sizes at which we want to display. We don’t want to double the size of everything we draw, so (and you should be doing this already) just make the CSS for the canvas element set to the unscaled size.

Note – the above code only scales the canvas element – when you draw within it, you will need to apply the same ratio again.