title: Display the Full Image Size (100% Width/Height) inside a HTML5 Canvas of a certain Width/Height using JavaScript, maybe CSS
body: <p>How do you make an image appear within an HTML5 Canvas of a certain height and width but have the image appear at 100% size? In other words, keep the image's aspect ratio size intact.</p>
  
  <p>Tree image = '<a href="http://kornyezet.sze.hu/images/oktatok/tree3.jpg" rel="noreferrer">http://kornyezet.sze.hu/images/oktatok/tree3.jpg</a>'</p>
  
  <p>I want this image of the above tree to be at 100% size within something you can scroll. </p>
  
  <p>E.g. like the "overflow: scroll" option shown in blue.
  <a href="http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow" rel="noreferrer">http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow</a></p>
  
  <p>The image must be use be sourced in Javascript.</p>
  
  <p>Javascript:</p>
  
  <pre><code>var canvas = document.getElementById('my_canvas'); 
  var ctx = canvas.getContext('2d'); 
  var imageObj = new Image(); 
  ctx.canvas.width = 100; ctx.canvas.height = 100; 
  imageObj.onload = function() { 
      ctx.drawImage(imageObj, 0, 0,100,100); 
  }; 
  imageObj.src = 'http://kornyezet.sze.hu/images/oktatok/tree3.jpg';
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;canvas id="my_canvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Here's a JSFIDDLE but the image is of Google. As you can see it is clearly resized/crunched. Instead I want the full size image to be seen there and some sort of scroll option.</p>
  
  <p><a href="http://jsfiddle.net/jzF5R/" rel="noreferrer">http://jsfiddle.net/jzF5R/</a></p>
  
  <p>Thanks!</p>