Canvas loses quality while saving video frame

Question

I’m using a function that captures a frame of the video to later define it as thumbnail.

function thumbnail()
    {
        var canvas = document.getElementById('thumb');
        $('#thumb').css('width',$('#video').css('width'));
        $('#thumb').css('height',$('#video').css('height'));

        var video = document.getElementById('video');
        canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, canvas.width, canvas.height);
    }

This frame will be set by the user, so every time they click on a given button, this function will be called.

The function works correctly, but it turns out that when the given frame is replicated to the canvas, the image loses quality and does not look like it is in the video. Here is the example image:

On the left is the video being played, while on the right is the Thumb generated after clicking the button. (The quality of the video is not the best, but look at the caption that is well defined and look at how it looks in the image generated by the canvas).

How do I make the generated image quality faithful to the frame of my video?