title: dynamic height and width of canvas based on selected images
body: <p>I am trying to have a canvas image drawn based on the selected image</p>
  
  <pre><code>&lt;canvas id="canvas" &gt;&lt;/canvas&gt;
  &lt;input type="file" id="file-input"&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(function() {
      $('#file-input').change(function(e) {
          var file = e.target.files[0],
              imageType = /image.*/;
  
          if (!file.type.match(imageType))
              return;
  
          var reader = new FileReader();
          reader.onload = fileOnload;
          reader.readAsDataURL(file);
  
      });
  
      function fileOnload(e) {
          var $img = $('&lt;img&gt;', { src: e.target.result });
          var canvas = $('#canvas')[0];
          var context = canvas.getContext('2d');
  
          $img.load(function() {
              context.drawImage(this, 0, 0);
          });
      }
  });
  </code></pre>
  
  <p>This writes the file to canvas, but the problem i face is,  its writing the image only till the height and width of canvas.</p>
  
  <p>How can i have the canvas width height automatically set to the height and width of the image selected</p>
  
  <p><a href="http://jsfiddle.net/RsxtG/191/" rel="nofollow">JSFIDDLE DEMO</a></p>
  
  <p>Also the image that is being drawn is very huge compared to the original image</p>