title: add an image instead of an object on canvas to exhibit zoom/scale property
body: <p>I want to add an image on the canvas and then zoom/Scale it</p>
  
  <p>I am trying to add this image file but unable to do so though I can add square and then zoom the canvas.</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/139992952/houseIcon.png" rel="nofollow">https://dl.dropboxusercontent.com/u/139992952/houseIcon.png</a></p>
  
  <p>how can I add the image.</p>
  
  <p>Fiddle:
  <a href="http://jsfiddle.net/ndYdk/11/" rel="nofollow">http://jsfiddle.net/ndYdk/11/</a></p>
  
  <pre><code>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();
   }
  </code></pre>
  
  <p>Any help will be really appreciated.</p>