getUserMedia not capturing the screen correctly

Question

Using the following code:

function captureScreen(size) {
    navigator.webkitGetUserMedia({
        audio: false,
        video: {
            mandatory: {
                chromeMediaSource: 'desktop',
                minWidth: size.width,
                maxWidth: size.width,
                minHeight: size.height,
                maxHeight: size.height,
                minFrameRate: 1,
                maxFrameRate: 1
            }
        }
    }, gotStream, getUserMediaError);

    function gotStream(stream) {
        var video = document.createElement('video');
        video.addEventListener('loadedmetadata',function(){
            var canvas = document.createElement('canvas');
            canvas.width = this.videoWidth;
            canvas.height = this.videoHeight;
            var context = canvas.getContext("2d");
            context.drawImage(this, 0, 0);
        },false);
        video.src = URL.createObjectURL(stream);
    }

    function getUserMediaError(e) {
        console.log('getUserMediaError: ' + JSON.stringify(e, null, '---'));
    }
}

Gives me the following result:

Notice how the right side of the image is slightly wrapped to the left side? For some reason, this happens on my laptop (1366x768), a friend's laptop (1366x768), but not my desktop (3840x1080 dual screen). the size parameter passed to the function is always the correct and actual size of the entire desktop area. Even when I hardcode the min and max width / height, I get the same result. Is there any way to fix this? Am I doing something wrong?

I'm building an Electron app which needs to take a screenshot of the user's desktop. There's also nothing else on the web page, and I am using a reset CSS.