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

You use devicePixelRatio to separate retina displays from normal displays

• http://blog.iwalt.com/2010/08/generating-highresolution-graphics-with-html5s-canvas-element.html

Your game logic coordinates (sprite positions, etc.) must operate independently from the screen coordinates which will be always 2x multiplied on the retina display.

Your graphics assets must have two versions. High resolution version and 50% scaled down normal version. When you operate on retina display, you draw 2x size canvas, resized with CSS and on this canvas use high resolution assets.