Loading image from a website and displaying it onto a canvas

I am trying to build a frontend with SvelteKit which queries a webserver using an HTTP get request for a file. I receive the file (which is ZIP format), unzip it, and extract an image from it. I am trying to then display the image on the frontend, but am struggling to get the displaying part part working. I am new to Svelte, JS and frontend development (coming from a scientific programming/Python background) so I am trying to hack my way through this. This is what I’ve tried so far:

<script>
...
async function download() {
    ...
    // get image portion of the data
    const image_data = await zip_data.file('view_img.jpg').async('blob');

    image_url = URL.createObjectURL(image_data);
    console.log('image url', image_url);
    console.log(image_data)

    const ctx = canvas.getContext('2d');

    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
    img.src = image_url
}
</script>
...
<canvas bind:this={canvas} width=600 height=400></canvas>

VSCode is complaining that I cannot create the image object without any arguments (The error is showing up as: Expected 1 arguments, but got 0.js(2554)) but all of the code samples that I see online show Image being created with no arguments. The only difference I notice is that most of the code samples create images in the onMount() function, but in my specific case, I am trying to load an image after processing some user input and running my HTTP GET query.

I would appreciate someone’s help in figuring out how to do this seemingly simple task of downloading an image and showing it on the frontend that I’m building.

TYVM!