title: Canvas: capturing stream with drawImage only captures upper left corner of stream image
body: <p>I'm having a weird issue when trying to make a webpage on which I want to capture a picture from the visitors webcam. I have two divs with a button in between which draws the content of the webcam stream in the first div at the time the button is clicked on a canvas in the second div.</p>
  
  <p>The problem is that the image of my stream seems to get clipped: only the upper left corner seems to be captured. I've tried playing with the dimensions of the canvas and the div containing it to no avail. The problem also persists when I save the canvas as an image.</p>
  
  <p>Here is a test page I made that has this issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Webcam test&lt;/title&gt;
  
          &lt;style&gt;
              #picturecontaienr {
                  width: 800px;
                  height: 800px;
              }
              #takenpicture {
                  width: 750px;
                  height: 750px;
                  margin: 0%;
                  padding: 0%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h1&gt;Webcam test!&lt;/h1&gt;
          &lt;div id="webcamcontainer"&gt;
              &lt;video width="500" height="500" autoplay="true" id="webcamstream"&gt;
              &lt;/video&gt;
          &lt;/div&gt;
          &lt;button id="takepicture"&gt;Take picture!&lt;/button&gt;
          &lt;div id="picturecontainer"&gt;
              &lt;canvas id="takenpicture"&gt;
              &lt;/canvas&gt;
          &lt;script&gt;
              var video = document.getElementById ( "webcamstream" );
  
              navigator.getUserMedia = ( navigator.getUserMedia ||
                                         navigator.webkitGetUserMedia ||
                                         navigator.mozGetUserMedia ||
                                         navigator.msGetUserMedia ||
                                         navigator.oGetUserMedia );
              if ( navigator.getUserMedia ) {
                  navigator.getUserMedia ( {video:true}, function ( stream ) {
                      video.src = window.URL.createObjectURL ( stream );
                  }, function ( ) {
                      document.getElementById ( "videocontainer" ).innerHTML += "&lt;p&gt;You did not give permission to take a picture of your QR code!&lt;/p&gt;";
                  } );
              }
  
              document.getElementById ( "takepicture" ).addEventListener ( "click", function ( ) {
                  var drawingContext = document.getElementById ( "takenpicture" ).getContext ( "2d" );
                
                  drawingContext.drawImage ( video, 0, 0, 500, 500 );
    
                  //var imageSource = document.getElementById ( "takenpicture" ).toDataURL ( "image/png" );
                  //alert ( imageSource );
              } );
              
          &lt;/script&gt;
       &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would be very grateful if someone could point me in the right direction.</p>
  
  <p>Thanks in advance,
  Joshua</p>