HTML5 캔버스로 ... 비율을 어떻게 유지합니까?

// set canvas to fullscreen 
$("canvas").attr('height',$(document).height()); 
$("canvas").attr('width', $(document).width()); 

//load bkgd img to canvas 
function dwg(){ 
    $("canvas").drawImage({ 
      source: "img/bkgd.jpg", 
      x: 0, 
      y: 0, 
      height : $(document).height(), 
      width : $(document).width(), 
      fromCenter: false 
     }); 
    } 
dwg(); 
// resize window event 
$(window).resize(function(){ 
     //console.log($(window).height()+', '+$(window).width()); 
     $("canvas").attr('height',$(document).height()); 
     $("canvas").attr('width', $(document).width()); 
     dwg(); 
    }); 

// Stop distort w/ jcanvas 
$("canvas").scaleCanvas({ 
     x: 100, y: 100, 
     width: 1, height: 1 
})

배경 크기가 조정되는 경우에도이 이미지는 완전한 배경을 유지해야합니다 (일부 클리핑은 정상입니다). HTML5 캔버스로 ... 비율을 어떻게 유지합니까?

이

는 http://calebevans.me/projects/jcanvas/

제안 jcanvas 라이브러리를 바랍니다 사용?

간략한 설명을 위해 생략 기능이 있습니다.

http://jsfiddle.net/ctrlfrk/ZGnbb/

그것은 비율에 수학의 단지 약간의 :

출처

2011-09-27 CAM