Правильное маштабирование canvas.getContext('2d').drawImage

Всем привет, создал функцию которая делает превью из выбранного видеофайла; При выборе видеофайла в форме загрузки она генерирует маленькое превью из середины видео. Проблема осталось лишь в том что бы правильно маштабировать картинку для предпросмотра. Само собой видео могут быть разные и преймущественно 16:9. На данный момент у меня вырезается только середина.

Я создал пример в jsfiddle https://jsfiddle.net/xeor451g/5/

function getImageFromVideo(file, id) {
        blobURL = URL.createObjectURL(file);
        video = document.createElement('video');
        canvas = document.createElement('canvas');
        p=video;
        canvas.width = 300;
        canvas.height = 168;
        video.preload = 'metadata';
        video.src = blobURL;
        video.muted = true;
        video.playsInline = true;
        video.play().then(function() {
            video.currentTime = Math.floor(video.duration / 2);
            video.pause();
            seek = video.addEventListener('seeked', function() {
                canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
                img = canvas.toDataURL('image/jpeg');
                video.src="";
                video.remove();
                delete video;
                canvas.remove();
                document.getElementById(id).src=img;
                return img;
            })
        })

    }