UIWebView com tela HTML5 e tela retina

Question

Meu aplicativo possui um UIWebView que serve conteúdo local. Se eu pegar uma imagem do tamanho da retina e usá -la como plano de fundo para o corpo, posso fazê -lo escalar corretamente usando o CSS -webkit-background-size propriedade. Isso me dá uma imagem nítida e clara no iPhone 4.

A tag de tela HTML5 não é tão cooperativa, no entanto. Quando eu uso o drawImage Comando para colocar a mesma imagem de tamanho da retina em uma tela HTML5, é gigantesca - bem dos limites da tela física. Este é o código que estou usando:

ctx.drawImage(retinaImage, 0, 0)

Se eu tentar colocar parâmetros de altura e largura no drawImage, a imagem diminui para encaixar na tela, mas está em bloco e pixelizada. Não é nítido como o fundo CSS.

Existe um truque que eu possa usar para a tela HTML5 que é equivalente ao CSS -webkit-background-size propriedade?

Obrigado!

Atualizar:

Aqui está o código final que eu usei para resolver esse problema. Espero que ajude outra pessoa no 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

Verificação de saída http://joubert.posterous.com/crisp-html-5-anvas-text-on-mobile-phones-and. Parece que se você múltiplas as dimensões do dispositivoPixelratio, então escala por essa proporção, ela deve funcionar.

Aqui está algum pseudo-código que funcionou para mim.

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

Deixe -me saber se isso resolve isso para você!