UIWebView w/HTML5 Canvas & Retina Display

Question

Mon application dispose d'un UIWebView qui sert du contenu local. Si je prends une image de la taille de la rétine et l'utilise comme arrière-plan pour le corps, je peux le faire évoluer correctement en utilisant la propriété CSS -webkit-background-size. Cela me donne une image claire et nette sur l'iPhone 4.

La balise HTML5 Canvas n'est pas si coopérative, cependant. Lorsque j'utilise la commande drawImage pour placer la même image de la taille de la rétine dans un canevas HTML5, c'est gigantesque - bien dépassé les limites de l'écran physique. Voici le code que je utilise:

ctx.drawImage(retinaImage, 0, 0) 

Si je tente de placer la hauteur et la largeur des paramètres sur la drawImage, l'image réduit à la taille de l'écran, mais il est polyédrique et pixélisée. Pas croustillant comme le fond CSS.

Y at-il un truc que je peux utiliser pour le HTML5 Canvas qui est équivalent à la propriété CSS -webkit-background-size?

Merci!

Mise à jour:

Voici le code final j'ai utilisé pour résoudre ce problème. Espérons que cela aidera quelqu'un d'autre à l'avenir:

 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

Découvrez http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and. On dirait que si vous multipliez les dimensions par le devicePixelRatio puis redimensionnez par ce ratio, cela devrait fonctionner.

Voici un pseudo-code qui a fonctionné pour moi. Faites-moi savoir si cela résout pour vous!