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 de retina y la uso como fondo para el cuerpo, puedo hacer que escale correctamente utilizando la propiedad CSS -webkit-background-size. Esto me da una imagen nítida y clara en el iPhone 4.

Sin embargo, la etiqueta HTML5 Canvas no es tan cooperativa. Cuando uso el comando drawImage para colocar la misma imagen de retina en un lienzo 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, la imagen reduce proporcionalmente para ajustarse a la pantalla, pero es bloque y pixelada. No es nítido como el fondo CSS.

¿Hay algún truco que pueda usar para el Canvas HTML5 que sea equivalente a la propiedad CSS -webkit-background-size?

Gracias!

Actualización:

Aquí está el código final utilicé para resolver este problema. Esperanzadamente ayuda 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

Echa un vistazo http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and. Parece que si multiplicas las dimensiones por el dispositivo PixelRatio, entonces escala en esa proporción y debería funcionar.

Aquí hay un pseudo-código que funcionó 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íseme si lo soluciona por usted!