Display the Full Image Size (100% Width/Height) inside a HTML5 Canvas of a certain Width/Height using JavaScript, maybe CSS
<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>