С HTML5 Canvas ... как сохранить пропорции?

Question

// 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
})

Это изображение должно поддерживать фон с полной кровью (с некоторым обрезанием все в порядке) даже при изменении размера фона.

это использует библиотеку jcanvas http://calebevans.me/projects/jcanvas/

Предложения Пожалуйста?

Там также есть функция рисования, для краткости я ее опустил.

Answer 1

Эта скрипка показывает код, необходимый для того, что вы хотите:

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

Это всего лишь математика для соотношений.