UIWebView w/HTML5 Canvas & Retina Display

Question

У моего приложения есть UIWebView, который обслуживает местный контент. Если я возьму изображение размера сетчатки и использую его в качестве фона для тела, я смогу его правильно масштабировать, используя свойство CSS -webkit-background-size. Это дает мне четкое, четкое изображение на iPhone 4.

Тег HTML5 Canvas не настолько дружелюбен. Когда я использую команду drawImage, чтобы поместить одно и то же изображение размера сетчатки в холст HTML5, это гигантский - за гранью физического экрана. Это код, я использую:

ctx.drawImage(retinaImage, 0, 0) 

Если я пытаюсь размещение высоты и ширины параметров на drawImage, изображение масштабируется до размеров экрана, но это блочная и некачественно. Не хрустящий, как фон CSS.

Есть ли трюк, который я могу использовать для холста HTML5, который эквивалентен свойству CSS -webkit-background-size?

Спасибо!

Update:

Вот окончательный код, который я использовал, чтобы решить эту проблему. Надеюсь, что это помогает кто-то в будущем:

 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. Похоже, если у вас несколько измерений с помощью devicePixelRatio, то масштабируется по этому коэффициенту, и он должен работать.

Вот несколько псевдокодов, которые сработали для меня.

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

Сообщите мне, если это решает его для вас!