I have recently started playing around with VideoJS and did some experiments with rendering <video> to a <canvas> 2d context.

I referenced HTMLDoctor’s solution so I can do some rendering to a canvas and apply some scaling.

One problem I hit was that the video render quality was horrible! It appeared all pixelated as if I’ve incorrectly upscaled (event when the video was clearly larger than the viewport).

After “overflowing” (let’s make that a thing for StackOverflow). So after checking an answer I noticed that I had the styles set as:

{ 
    width: 100%;
    height: 100%;
}

So… this kinda messed up the rendering.

After removing the styles and just explicitly setting the canvas width and height to the window’s innerHeight and innerWidth it was beautiful!. This was clearly outlined in HTMLDoctor’s sample codes but I obviously skipped that portion.