title: HTML Canvas: Scaling image to fit without stretching?
body: <p>Im using the code below to draw and scale an image inside a canvas. The issue being that the image rendered inside is stretched to fit.</p>
  
  <p>If possible, I would like it to be scaled based on width but to maintain its aspect ratio.</p>
  
  <p>Any ideas?</p>
  
  <pre><code>//IMAGE LOADER
  var canvas = document.getElementById('image-canvas');
  var canvas2 = document.getElementById('image-canvas2');
  ctx = canvas.getContext('2d');
  ctx2 = canvas2.getContext('2d');
  
  // Trigger the imageLoader function when a file has been selected
  var fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', imageLoader, false);
  
  function imageLoader() {
      var reader = new FileReader();
      reader.onload = function(event) {
          img = new Image();
          img.onload = function(){
              ctx.drawImage(img,0,0,canvas.width, canvas.height);
              ctx2.drawImage(img,0,0,canvas.width, canvas.height);
          }
          img.src = reader.result;
      }
      reader.readAsDataURL(fileInput.files[0]);
  }
  </code></pre>