How to prevent @2x image scaling within javascript on a retina iPad?

Question

I'm developing a web game using html <canvas> and javascript. The game must also be functional on the iPad, preferably both retina and non-retina displays. In this game, I use a spritesheet png. This spritesheet is 3500 pixels wide and 3700 pixels high.

In the logic for my game, I'm using canvas' context.drawImage() to grab the sprites and draw them into my canvas. In a desktop browser, this works perfectly fine, and everything is great. On a retina iPad, the image loads at only a quarter of it's size, which makes many of my drawImage() calls fail, thinking they're trying to grab pixels outside the boundaries of the loaded image. (If I grab a sprite at location 1200, 1400, and the iPad thinks my image is smaller than that, an INDEX_SIZE_ERR error is thrown.)

For example, the code written below is what I have in my project. When alerting the width and the height, I get a result of 875 pixels wide by 925 pixels high - exactly 1/4th of the original image's size.

spritesheet = new Image();
spritesheet.onload = function() {
    splashInterval = setInterval(renderFrame, 30);
    alert(spritesheet.width); // returns 875 on retina iPad
    alert(spritesheet.height); // returns 925 on retina iPad
};
spritesheet.src = "/spritesheet.png";

The normal solution to this for retina displays is to create an image that's increased in size so when the iPad downscales it, everything is fine. However, going by the sizes reported above, I would have to create an image that is 4x the size in width and height. That makes an image that would be 14,000 pixels wide by 14,800 pixels high. Even as a solid white jpg, this image fails to save in Photoshop, and is reported in Gimp to be 1.9GB big. Naturally this isn't a solution. ;)

Therefore my question stands: Is there a way to prevent the iPad retina display from downscaling images that are loaded through Javascript? When I load my 3500x3700 pixel image, I need it to stay at 3500x3700 pixels, so my context.drawImage() calls work as intended.

Any and all ideas would be appreciated. Thanks!

Answer 1

you can find whether the display is retinal or not using following :

var retina = window.devicePixelRatio > 1 ? true : false;

if (retina) {
    // the user has a retina display
    // do something

}
else {
    // the user has a non-retina display
    // do something else 
}