Canvas loses quality when saving video frame

I'm using a function that captures a frame of the video to later define it as a 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 defined by the user, so every time he clicks on a particular button, this function will be called.

The function works correctly, but it happens that when the given frame is replicated to the canvas, the image loses quality and does not stay the way it is in the video. Here is the sample image:

On the left is the video being played, while on the right is the thumb generated after the button is clicked. (The quality of the video is not of the best, but notice the legend that is well defined and look how it is in the image generated by the canvas.)

How do I make sure that the quality of the generated image is true to the frame of my video?