title: Javascript Camera Snapshot stretched too large
body: <p>I am trying to take a snapshot from someone's webcam through javascript. The code works except the resultant image is stretched way too much to me readable.</p>
  
  <p>I've messed around with the: ctx.drawImage(video, 0, 0);line</p>
  
  <p>I've tried ctx.drawImage(video, 0, 0,1280,720); with no difference</p>
  
  <p>I've tried ctx.drawImage(video, 0, 0,100,100); with major difference. It made the whole image appear but way too small for the eye.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;video autoplay&gt;&lt;/video&gt;
  &lt;img src="" width=1280, height=720&gt;
  &lt;canvas style="display:none;"&gt;&lt;/canvas&gt;
  &lt;script&gt;
    var errorCallback = function(e) {
      console.log('Reeeejected!', e);
      video.src = 'failure.mp4'; // fallback.
    };
  
  navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  
  var video = document.querySelector('video');
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var localMediaStream = null;
  var hdConstraints = {
    video: {
      mandatory: {
        minWidth: 1280,
        minHeight: 720
      }
    }
  };
  
  function snapshot() {
      if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        // "image/webp" works in Chrome.
        // Other browsers will fall back to image/png.
        document.querySelector('img').src = canvas.toDataURL('image/webp');
      }
    }
  
   function success(stream) {
       video.src = window.URL.createObjectURL(stream);
      localMediaStream = stream;
   }
  video.addEventListener('click', snapshot, false);
  navigator.getUserMedia(hdConstraints, success,errorCallback);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Result:</strong></p>
  
  <p><strong><em>Video:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/QGXlY.jpg" alt="example input"></p>
  
  <p><strong><em>Image Output:</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/5adAB.png" alt="example output"></p>