HTML5: crazy canvas drawImage sizing

Answer 1

Those magic coefficients correspond to the ratio between the video object size and the size of canvas.

Suppose, your video size is (400 x 300) and you want to show it on the canvas with size (200 x 150). It can be done just by:

context.drawImage(video,0,0,200,150);

It will resize full video to fit the canvas.

However, you are using clipping version of drawImage(). The first four coordinate arguments describe clipping parameters. For example in the following case it takes quarter of full video:

context.drawImage(video,0,0,200,150,0,0,200,150);

---

Edit according to updated question

The image is clipped, since properties canvas.clientWidth and canvas.clientHeight are larger than canvas.width and canvas.height. That happens because of CSS display: flex;. To show full image use:

context.drawImage(video, 0, 0, canvas.width, canvas.height);