I am developing a web game using html <canvas> and javascript. The game must also be functional on the iPad, preferably both retina and non-retina. In this game I use spritesheet png. This spritesheet has a width of 3500 pixels and a height of 3700 pixels.
In the logic for my game, I use canvas context.drawImage() to capture sprites and draw them in my canvas. In a desktop browser, this works fine, and everything is fine. On the iPad's retina, the image only loads a quarter of its size, which is why many of my drawImage() calls fail, thinking they are trying to capture pixels outside the loaded image. (If I take a sprite at location 1200, 1400, and the iPad thinks my image is smaller than this, an INDEX_SIZE_ERR error will be thrown.)
For example, the code below is what I have in my project. When you warn about the width and height, I get a result with a resolution of 875 pixels by 925 pixels in height - exactly 1/4 of the original image 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";
A normal solution to display the retina is to create an image that grows in size, so when the iPad shrinks it, everything is fine. However, based on the sizes described above, I would have to create a 4x image in width and height. This makes an image measuring 14,000 pixels by 14,800 pixels. Even as a solid white jpg, this image cannot be saved in Photoshop, and Gimp says that it is 1.9 GB. Naturally, this is not a solution.;)
So my question is: is there a way to prevent the retina from displaying the iPad from shrinking images uploaded via Javascript? When I upload an image with a resolution of 3500x3700 pixels, I need it to remain at 3500x3700 pixels, so my calls to context.drawImage() work as intended.
Any ideas will be appreciated. Thanks!