UIWebView w / HTML5 Canvas y Retina Display

Question

Mi aplicación tiene un UIWebView que sirve contenido local. Si tomo una imagen de tamaño retina y lo uso como un fondo para el cuerpo, lo puedo hacer escala adecuada mediante la propiedad CSS -webkit-background-size. Esto me da un crujiente, imagen clara en el iPhone 4.

La etiqueta HTML5 Canvas no es tan cooperativa, sin embargo. Cuando utilizo el comando drawImage para colocar la misma imagen a tamaño retina en un canvas de HTML5, es gigantesca - mucho más allá de los límites de la pantalla física. Este es el código que estoy usando:

ctx.drawImage(retinaImage, 0, 0)

Si intento de colocar la altura y la anchura de los parámetros en el drawImage, las escalas de imagen hacia abajo para adaptarse a la pantalla, pero es bloque y pixelada. No crujientes como el fondo de CSS.

¿Hay un truco que puede utilizar para el HTML5 Canvas que es equivalente a la propiedad CSS -webkit-background-size?

Gracias!

Actualización:

Este es el código que se utiliza para final de resolver este problema. Es de esperar que ayude a alguien más en el futuro:

        if (window.devicePixelRatio == 2) {
            myCanvas.setAttribute('height', window.innerHeight * 2);
            myCanvas.setAttribute('width', window.innerWidth * 2);
            ctx.scale(2, 2);
        } else {
            myCanvas.setAttribute('height', window.innerHeight);
            myCanvas.setAttribute('width', window.innerWidth);
        }

Answer 1

http: // Joubert. posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and . Se ve como si las dimensiones múltiples de la devicePixelRatio luego escalar por esa relación, así que debería funcionar.

Aquí hay algunos pseudo-código que trabajó para mí.

var ctx = myCanvasElem.getContext("2d");
ctx.attr("width", width * window.devicePixelRatio);
ctx.attr("height", height * window.devicePixelRatio);
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
ctx.drawImage(img, x, y, width, height);

Avísame si se soluciona por usted!