Rendering video element to canvas - unwanted stretching?

Question

I'm trying to generate a screenshot of a video. The goal is to generate an image that is identical to the first frame of the video. However, I'm facing an issue with the resulting image being stretched.

This image displays the video on the left, paused at the very beginning - and the generated image on the right:

Notice the grey area at the bottom? It has been stretched to a taller height than that of the video.

I am using the following code the generate the screenshot:

Example Markup:

<video id="video" height="300" width="320" preload="auto">
    <source src="http://domain.com/video.mp4">
</video>
<canvas id="canvas" height="300" width="320"></canvas>

Script:

// Grab an existing video element, 300px tall, 320px wide.
var video = document.getElementById('video');
// Grab existing canvas, 300px tall, 320px wide.
var canvas = document.getElementById('canvas');
// Wait until video has loaded
video.addEventListener('loadeddata', function() {
    var context = canvas.getContext('2d');
    // Render using same dimensions.
    context.drawImage(video, 0, 0, 320, 300);
}, false);

Could someone please advise me on how to avoid this stretching?

Answer 1

Just like for <img> elements, <video> element's width and height attributes resize the container. drawImagemethod in other hand do use the content.

You then have to use the videoElement.videoWidth and videoElement.videoHeight attributes to retrieve the media's width and height (or img.naturalWidth and img.naturalHeight for image elements).

So you've got two possibilities :

Either you want to make a capture of the video, in its real size :

var ctx = canvas.getContext('2d');
btn.onclick = function(){
  // set your canvas width and height to the media's ones
  canvas.width = vid.videoWidth;
  canvas.height = vid.videoHeight;
  ctx.drawImage(vid, 0,0);
  };

<video src="http://vjs.zencdn.net/v/oceans.mp4" width="200" height="100" autoplay controls muted loop id="vid"></video><button id="btn">take a screenshot</button>
<canvas id="canvas"></canvas>

Or if you want to take a screenshot of your video element, you'll face more complexity since you'll have to fake the default object-fit: contain; CSS property. This can be done thanks to the ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); properties.

You can find one way here, and a more complete one here so I won't include it in this answer, just remember to use the video.videoWidth and video.videoHeight attributes as sourceWidth and sourceHeight.