Forums » Help » Images resolution and devicePixelRatio

I'm creating a game with 960x640 resolution (iPhone retina). So background image resolution will be 960x640.

I calculate canvas size in this way:

    var canvasScale = window.innerHeight / 640;
    var canvas = document.getElementById('canvas');
    canvas.style.width = 960 * canvasScale + 'px';
    canvas.style.height = 640 * canvasScale + 'px';

In both iPhone (retina and no retina) window.innerHeight is 320, so canvasScale is always 0.5 (because devicePixelRatio in retina is 2)

So, my question is... images will display well? (I have no iPhone to test yet) Or will be better to create the game with 480x320 resolution and then use separate images for non-retina and retina (@2x) ?

I would use the @2 images, because if you go to a non retina device, the image will still load larger, and then look incorrect. Also your resolution you are using is the iPhone 4s size, the new iPhones are at 640 x 1136, so they game will be letter boxed or scaled depending on how you set up ejecta.

Thanks stillen. The fact that the resolution I'm using isn't the new iPhone size is not a problem.

If I'm resizing the canvas to fit the screen, I don't understand why the image will still load larger in non-retina iPhone... but I have not tested yet...

In the iPhone with retina, the image will look correct?

Let me see if I can explain this without sounding like an idiot.

If the canvas is 320x480 at 100% and you load in an image that is 320x480 is will fill the canvas 100%.

If you scale the canvas up to 640x960, with css, both the canvas and the image will be scaled up, but they will pixelate.

If you load in an image that is 640x960 into a canvas that is 320x480, the image will be 4 times larger then the canvas, and appear to be clipped.

By the "magic of the retina display" and the @2 settings, the larger image will be scaled down 4 times, to 320x480. Without setting the image at @2, impact/ejecta/mobile safari does not know to make this adjustment and just thinks the images is a large image instead of an image to be scaled.