UIWebView w / HTML5 Canvas & Retina Display

Question

Meine App hat eine UIWebView, die lokalen Inhalte serviert. Wenn ich eine Retina Größe Bild nehmen und verwenden es als Hintergrund für den Körper, kann ich es Skala durch richtig die CSS -webkit-background-size Eigenschaft. Das gibt mir ein klares, scharfes Bild auf dem iPhone 4.

Der Tag HTML5 Canvas ist nicht so kooperativ, aber. Wenn ich den drawImage Befehl verwenden, um die gleiche Retina Größe Bild in ein HTML5 Leinwand zu bringen, ist es gigantisch - weit über die Grenzen des physischen Bildschirm. Dies ist der Code, den ich mit:

ctx.drawImage(retinaImage, 0, 0)

Wenn ich versuche, platzieren Höhe und Breite Parameter auf dem drawImage, um das Bild Skalen auf den Bildschirm zu passen, aber es ist blockartig und pixelig. Nicht knackig wie der CSS Hintergrund.

Gibt es einen Trick, den ich für das HTML5 Canvas verwenden können, die auf die CSS -webkit-background-size Eigenschaft entspricht?

Danke!

Update:

Hier ist der endgültige Code, den ich verwendet, um dieses Problem zu lösen. Hoffentlich hilft es jemand anderes in der Zukunft:

        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

Sehen Sie sich http: // Joubert. posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and . Sieht aus wie, wenn Sie mehrere Dimensionen durch die devicePixelRatio dann von diesem Verhältnis skaliert und sollte es funktionieren.

Hier einig Pseudo-Code, der für mich gearbeitet.

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

Lassen Sie mich wissen, ob das löst es für Sie!