在画布上添加图像而不是对象以显示缩放/缩放属性

Question

我想在画布上添加图像，然后缩放/缩放

我正在尝试添加此图像文件，但我无法添加方块，然后缩放画布。

https://dl.dropboxusercontent.com/u/139992952/houseIcon.png

如何添加图片。

小提琴： http://jsfiddle.net/ndYdk/11/

function draw(scale, translatePos){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);

context.save();
context.translate(translatePos.x, translatePos.y);
context.scale(scale, scale);
context.beginPath(); // begin custom shape
  context.rect(20, 20, 50, 50);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'black';
  context.stroke();
context.closePath(); // complete custom shape
var grd = context.createLinearGradient(-59, -100, 81, 100);

context.fillStyle = grd;
context.fill();

context.stroke();
context.restore();
 }

任何帮助都将非常感激。