After capturing image on mobile device the preview is not that exact

The problem can be seen in attached image. The capture area and captured image are not that much exact...

Here is the code which is taking snapshot.

var takeSnapshot = function () {
    const deviceWidth = $(window).width();
    let widthForSmallDevice = 270;
    let heightForSmallDevice = 202.5;
    if (deviceWidth <= 419 && deviceWidth >= 340) {
        widthForSmallDevice = 310;
        heightForSmallDevice = 220;
    } else if (deviceWidth <= 499 && deviceWidth >= 420) {
        widthForSmallDevice = 380;
        heightForSmallDevice = 290;
    } else if (deviceWidth >= 500) {
        widthForSmallDevice = 400;
        heightForSmallDevice = 300;
    }
    if ($('#dest').is(':hidden')) {
        canvas.width = videoElement[0].videoWidth;
        canvas.height = videoElement[0].videoHeight;
        destCanvas.width = widthForSmallDevice;
        destCanvas.height = heightForSmallDevice;
        canvas.getContext('2d').drawImage(videoElement[0], 0, 0, widthForSmallDevice, heightForSmallDevice);
        destCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
        destCtx.canvas.style.display = 'inline-block';
        $('#frontImageCapturedLable').show();
        $('#backImageClick').prop('disabled', false);
        $('#captureArea').hide();
        $('#backVideo').trigger('play');
        $('#backImageCameraSelect').show();
        $('#confirmationDiv').show();
    } else {
        canvas1.width = backImageVideoElement[0].videoWidth;
        canvas1.height = backImageVideoElement[0].videoHeight;
        backCanvas.width = widthForSmallDevice;
        backCanvas.height = heightForSmallDevice;
        canvas1.getContext('2d').drawImage(backImageVideoElement[0], 0, 0, widthForSmallDevice, heightForSmallDevice);
        backImage.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);
        backImage.canvas.style.display = 'inline-block';
        $('#backImageCapturedLable').show();
        $('#backImageCaptureArea').hide();
    }
    if ($('#dest').is(':visible') && $('#backImage').is(':visible')) {
        $('#frontImageResetButton').show();
        $('#backImageResetButton').show();
    }
};

Can anyone suggest tell mw what is wrong in the above code and how can I get rid of the issue. Thanks in advance.