html5 canvas game - how to add retina support

Question

I\'m creating an HTML5 canvas game for iPhone. I would like to support both retina and non-retina displays.

My question is, how do I support both retina and non-retina d

Answer 1

A new article has just been published on the topic over at html5rocks.com:

• HIGH DPI CANVAS

upsize your canvas width and height by devicePixelRatio / webkitBackingStorePixelRatio and then use CSS to scale it back down to the logical pixel size you want. Taking our above case where Chrome reports a webkitBackingStorePixelRatio of 1 and a devicePixelRatio of 2 we would scale the dimensions of the canvas by 2 / 1, i.e. multiply them by 2, then we would use CSS to scale it back down.