Not Finding QR Code

[ajjohnson1996]

I'm trying to decode this image and similar images captured from a rear phone camera, but the decoding always fails.

 (function () {

    var canvas = document.querySelector('canvas');
    var input = document.querySelector('.inputfile');
    var context = canvas.getContext("2d")

    input.addEventListener('change',  (event) => {

        if(event.target.files && event.target.files[0]){

            var reader = new FileReader();
            reader.onload = (event) => {
                var img = new Image();
                img.onload = async() => {
                    canvas.height = img.height;
                    canvas.width = img.width;
                    context.drawImage(img, 0, 0);

                                        //get images data
                    var imageData = context.getImageData(0, 0, img.width, img.height)

                    //get qr code
                    var code = await jsQR(imageData.data, img.height, img.width)

                    if (code){
                        document.getElementById('qr-info').innerHTML = ""
                        document.getElementById('qr-info').innerHTML += code.data;
                    }
                    else{

                        document.getElementById('qr-info').innerHTML = "";
                        document.getElementById('qr-info').innerHTML += "Image is not QR Code"
                    }
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(event.target.files[0])
        }
    });

Images like this one is just fine, but I need to be able to decode codes taken from a camera.

What am I doing wrong?

[ajjohnson1996]

If anyone is having the same issue as I was, it was due to me scaling the canvas with the resolution of the picture, which caused the image to be too large. I'm scaling the images down to 300x300 and it works as I intended.