Crop the exact center of a canvas image source
<p>I have made an input form that receives uploaded files into a canvas element. Because different images come with different sizes, the uploaded image is always stretched to fit my canvas size which is <code>400</code> * <code>350</code>. </p>

<p>How do I crop the exact center of the uploaded image to the ratio of my canvas size, so as to fit the the uploaded image into the canvas.</p>

<pre><code>&lt;input type='file' id="fileUpload" /&gt;
&lt;canvas id="up_canvas" width="400" height="350" style="border: 1px solid red;"&gt;&lt;/canvas&gt;

&lt;script&gt;
//get input as canvas
function el(id){return document.getElementById(id);}

var canvas_one  = el("up_canvas");
var context_one = canvas_one.getContext("2d");

function readImage() {
if ( this.files &amp;&amp; this.files[0] ) {
    var FR= new FileReader();
    FR.onload = function(e) {
       var img = new Image();
       img.onload = function() {
         context_one.drawImage(img, 0, 0, 400, 350);
       };
       img.src = e.target.result;
    };       
    FR.readAsDataURL( this.files[0] );
}
}

el("fileUpload").addEventListener("change", readImage, false);
&lt;/script&gt;
</code></pre>