HTML5 캔버스 및 망막 디스플레이가있는 UIWebView

Question

내 응용 프로그램에는 로컬 컨텐트를 제공하는 UIWebView가 있습니다. 망막 크기의 이미지를 배경으로 사용하면 CSS -webkit-background-size 속성을 사용하여 올바르게 확대 할 수 있습니다. 이렇게하면 iPhone 4에서 선명하고 깨끗한 이미지를 얻을 수 있습니다.

HTML5 캔버스 태그는 너무 협조 적이 지 않습니다. drawImage 명령을 사용하여 동일한 망막 크기 이미지를 HTML5 캔버스에 배치하면 거대한 현상인데 실제 화면의 범위를 넘어서게됩니다. 이것은 내가 사용하고 코드입니다 :

ctx.drawImage(retinaImage, 0, 0) 

나는 drawImage에 높이와 폭 매개 변수를 배치하려고하면이 사진이 화면에 맞게 아래로 확장,하지만 고르지 및 픽셀 화입니다. CSS 배경처럼 신선하지 않습니다.

CSS -webkit-background-size 속성과 동일한 HTML5 캔버스에 사용할 수있는 트릭이 있습니까?

감사합니다.

업데이트 :

여기에 내가이 문제를 해결하는 데 사용되는 최종 코드입니다.

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

그게 해결되면 알려주세요!