UIWebView w / HTML5 Canvas Affichage et Retina

Question

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

La balise Canvas HTML5 est pas coopératif, cependant. Lorsque j'utilise la commande drawImage pour placer la même image de la taille de la rétine dans une toile HTML5, il est gigantesque - bien au-delà des 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 croustillantes comme l'arrière-plan CSS.

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

Merci!

Mise à jour:

Voici le code final j'ai utilisé pour résoudre ce problème. Espérons que cela aide 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

Consultez http: // joubert. posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and . On dirait que si vous les multiples dimensions de la devicePixelRatio l'échelle puis par ce rapport et il devrait fonctionner.

Voici quelques pseudo-code qui a fonctionné pour moi.

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

Faites-moi savoir si cela pour vous permet de résoudre!