With the HTML5 Canvas ... how do maintain proportion?

// 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: 开发者_StackOverflow1, height: 1
})

This image should maintain a fullbleed background (some clipping is ok ) even as the background resizes.

this is using the jcanvas library http://calebevans.me/projects/jcanvas/

Suggestions Please?

There is a drawing function in there as well, for brevity I have omitted it.

---

This fiddle shows the code needed to do what you want:

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

It's just a bit of maths on the ratios.