html5图片比例控制,按比例调整图像大小以适应HTML5画布

我正在尝试编写一个jQuery插件，该插件将具有与Zazzle.com上基于Flash的产品编辑器类似的功能。我需要知道的是，使用context.drawImage()画布功能，我可以插入图像并调整其大小以适合画布而不会使其变形。按比例调整图像大小以适应HTML5画布

图像是500x500px，画布也是这样，但由于某些原因，当我将500x500设置为图像尺寸时，它的方式很大。

这是迄今为止我全码：

(function($) {

jQuery.fn.productEditor = function(options) {

var defaults = {

'id' : 'productEditor',

'width' : '500px',

'height' : '500px',

'bgImage' : 'http://www.wattzup.com/projects/jQuery-product-editor/sampleProduct.jpg'

};

return this.each(function() {

var $this = $(this)

var options = $.extend(defaults, options);

// Create canvas

var canvas = document.createElement('canvas');

// Check if their browser supports the canvas element