HTML5: crazy canvas drawImage sizing

Answer 1

I did some testing on this, and it seems like the 3rd and 4th parameters, which are the width and height of the area you want to take from the source, are relative to the original size of the media, NOT the size of the element the media is displayed in. So, it's based on the original dimensions of your video, and not the width and height of your video element.

I'm surprised the non-clipping version doesn't work though. It seems like it should if you do:

context.drawImage(video, 0, 0, canvas.clientWidth, canvas.clientHeight);

This should take the full video image and display it at the top left corner of the canvas and over the full width and height of the canvas.