title: html2canvas image aspect ratio is not correct
body: <p>I'm practicing on using <strong><a href="http://html2canvas.hertzen.com/" rel="nofollow noreferrer">html2canvas</a></strong> and trying to use it to transfer a part of the page to canvas.<br>
  I can make it happen but I lose the aspect ratio when doing it.<br>
  Below is what's inside of the whole document, just without tags like body, html, head, etc.</p>
  
  <p><strong>HTML Body :</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="left"&gt;
          &lt;img src="frame_37.png" style="height:50%;" /&gt;
          &lt;div id="button"&gt;transfer&lt;/div&gt;
          &lt;div class="littlebox" style="left: 50px; top: 40px;"&gt;&lt;/div&gt;
          &lt;div class="littlebox" style="left: 75px; top: 95px;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="right"&gt;
          &lt;canvas id="thecanvas"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript Block :</strong></p>
  
  <pre><code>$(document).ready(function(e) {
      $("#button").on("click", function(event) {
          html2canvas(document.body, {
              allowTaint: true,
              taintTest: false,
              onrendered: function(canvas) {
                  var can = document.getElementById('thecanvas');
                  var destCtx = can.getContext('2d');
                  destCtx.drawImage(canvas, 0, 0);
          }
          });
      });
  });
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>body       { height:100%; width:100%; margin:0 !important;
               padding:0 !important; overflow:hidden; }
  #wrapper   { width:100%; height:100%; position: absolute;}
  #left      { background-color: #dfdfdd; float:left; width:50%; height:100%; }
  #right     { background-color: #cdcdcd; float:left; width:50%; height:100%; }
  #button    { padding:20px; width:auto; height:auto; background:#00b1dc; }
  #thecanvas { width:80%; height:80%; border:1px solid #fff; margin:10%; }
  .littlebox { background:#fff; position:absolute; width:32px; height:32px; }
  </code></pre>
  
  <p><strong>Screenshot :</strong>
  <img src="https://i.stack.imgur.com/peQSl.png" alt="enter image description here"></p>