¿Cómo prevenir el escalamiento de imagen @ 2x dentro de javascript en un iPad retina?

Question

Estoy desarrollando un juego web usando html <canvas> y javascript. El juego también debe ser funcional en el iPad, preferiblemente en pantallas retina y no retina. En este juego, utilizo un png spritesheet. Esta hoja de sprites tiene 3500 píxeles de ancho y 3700 píxeles de alto.

En la lógica de mi juego, estoy usando canvas 'context.drawImage() para agarrar los sprites y dibujarlos en mi lienzo. En un navegador de escritorio, esto funciona perfectamente bien, y todo es genial. En un iPad de retina, la imagen se carga solo en una cuarta parte de su tamaño, lo que hace que muchas de mis llamadas drawImage() fallen, pensando que están tratando de captar píxeles fuera de los límites de la imagen cargada. (Si tomo un sprite en la ubicación 1200, 1400, y el iPad piensa que mi imagen es más pequeña, se emite un error INDEX_SIZE_ERR).

Por ejemplo, el código escrito a continuación es el que tengo en mi proyecto. Al alertar el ancho y la altura, obtengo un resultado de 875 píxeles de ancho por 925 píxeles de alto, exactamente 1/4 del tamaño de la imagen original.

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"; 

La solución normal a este para las pantallas retina es la creación de una imagen que se incrementa en tamaño por lo que cuando el iPad downscales ella, todo está bien. Sin embargo, yendo por los tamaños reportados arriba, tendría que crear una imagen que es 4 veces el tamaño en ancho y alto. Eso hace que una imagen sea de 14,000 píxeles de ancho por 14,800 de alto. Incluso como un jpg blanco sólido, esta imagen no se guarda en Photoshop, y se informa en Gimp que tiene 1.9GB de tamaño. Naturalmente, esta no es una solución. ;)

Por lo tanto, mi pregunta es: ¿hay alguna manera de evitar que la pantalla Retina iPad reduzca la escala de las imágenes que se cargan a través de Javascript? Cuando cargo mi imagen de 3500x3700 píxeles, necesito que se mantenga en 3500x3700 píxeles, por lo que mis llamadas context.drawImage() funcionan según lo previsto.

Se agradecerán todas y cada una de las ideas. ¡Gracias!

Answer 1

se puede encontrar si la pantalla es de retina o no usar siguiente:

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 
}