title: How do I proportionally resize a video in canvas?
body: <p>I'm having trouble proportionally scaling the video frame when rendering a video element on canvas. </p>
  
  <h1>What I've tried:</h1>
  
  <p>I read the selected answer to <a href="https://stackoverflow.com/questions/14087483/how-to-proportionally-resize-an-image-in-canvas">How to proportionally resize an image in canvas?</a> but it did not work for me. I'm rendering an HTML5 video frame rather than an image. This might seem unusual, so here it is explained: <a href="http://html5doctor.com/video-canvas-magic/" rel="nofollow noreferrer">video + canvas = magic</a></p>
  
  <p>My problem with adapting the answer to that related question might have been:</p>
  
  <ul>
  <li>Maybe the video size works differently than an image.</li>
  <li>maybe I incorrectly converted the answer used for that specific situation to mine, since it uses confusing static measurements ('300') in multiple places, without really explaining them. </li>
  </ul>
  
  <h1>What I have so far</h1>
  
  <p>Right now, my player works, fitting the video to it, but it stretches to fit. </p>
  
  <pre><code>context.drawImage(videoPlayer, 0, 0, canvasPlayer.width, canvasPlayer.height); 
  //canvasPlayer -&gt; HTML5 canvas, videoPlayer -&gt; HTML5 video element
  </code></pre>
  
  <p>I'd like to know (respectively):</p>
  
  <ul>
  <li><p>how to fill the height vertically, remaining proportional.</p></li>
  <li><p>how to fill the width horizontally, remaining proportional.</p></li>
  </ul>
  
  <p><strong>How can I do this?</strong> </p>