title: canvas image size in html5
body: <pre><code>var canvas = document.getElementById("canvasPnl");
  var context = canvas.getContext('2d');
  var locationtxt = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
  var imageObj = new Image();
  imageObj.src = document.getElementById("tempImg").src;
  imageObj.onload = function () {
      var x = 188;
      var y = 30;
      var width = 200;
      var height = 137;
      context.drawImage(imageObj, x, y, width, height);
      context.font = "20pt Calibri";
      context.fillText(locationtxt, 40, 40);
  };
  </code></pre>
  
  
  
  <pre><code>&lt;canvas id="canvasPnl" width="132" height="120" style="border:0px solid #d3d3d3;"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>The size of the image is becoming bigger and it is not fitting in canvas and also the image is rotated.</p>
  
  <p>How to get original image in canvas?</p>