UIWebView w / HTML5 Canvas & Retina Display

Question

La mia app ha un UIWebView che serve contenuti locali. Se prendo immagine una dimensione retina e lo uso come sfondo per il corpo, posso farlo scala correttamente utilizzando la proprietà CSS -webkit-background-size. Questo mi dà un croccante, un'immagine chiara su iPhone 4.

Il tag HTML5 Canvas non è così cooperativo, però. Quando uso il comando drawImage per inserire la stessa immagine formato retina in una tela HTML5, è gigantesco - ben oltre i limiti dello schermo fisico. Questo è il codice che sto usando:

ctx.drawImage(retinaImage, 0, 0)

Se provo mettendo i parametri di altezza e larghezza sul drawImage, the picture scale verso il basso per adattarsi allo schermo, ma è blocchi e pixel. Non croccante come lo sfondo CSS.

C'è un trucco che posso utilizzare per l'HTML5 Canvas che è equivalente alla proprietà CSS -webkit-background-size?

Grazie!

Aggiornamento:

Ecco il codice che ho finale utilizzato per risolvere questo problema. Speriamo che aiuta a qualcun altro in 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 . Si presenta come se si multipla le dimensioni da parte del devicePixelRatio poi scalare da quel rapporto così dovrebbe funzionare.

Ecco alcuni pseudo-codice che ha lavorato per me.

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

Fammi sapere se questo risolve per voi!