[Solution code available] Displaying local files on Canvas

Things I want to do

This displays a local image file on an HTML canvas.

I found several suggestions when I searched, but when I tried them, they didn’t work.

(No errors were displayed, and nothing appeared on the Canvas.)

Environment

Chrome：131.0.6778.86

Code I tried

HTML

<input type="file" id="file" accept="image/png, image/jpeg"></div>
<canvas id="canvas"></canvas>

JavaScript

document.getElementById("file").onchange = (event) => {
    const file = event.target.files[0];
    if(!file.type.match(/^image\/(png|jpeg)$/)) return ;
    const reader = new FileReader();
    reader.onload = (event) => {
        const img = new Image();
        img.src = reader.result;

        canvas.width  = img.width;
        canvas.height = img.height;
        canvas.getContext('2d').drawImage(img, 0, 0);
    }
    reader.readAsDataURL(file);
}

When a file is selected, an Image is created and the selected image is placed in the src attribute.

The created image is being drawn onto the Canvas using `drawImage`. It looks correct, but it didn’t work in my environment.

countermeasure

It worked after modifying the JavaScript code as follows.

The code that manipulates the image after setting the `src` attribute of the image is executed after calling `setTimeout`, which puts the application into an idle state.

document.getElementById("file").onchange = (event) => {
    const file = event.target.files[0];
    if(!file.type.match(/^image\/(png|jpeg|gif)$/)) return ;
    const reader = new FileReader();
    reader.onload = (event) => {
        const img = new Image();
        img.src = reader.result;

        setTimeout( ()=> {
            canvas.width  = img.width;
            canvas.height = img.height;
            canvas.getContext('2d').drawImage(img, 0, 0);
            });
    }
    reader.readAsDataURL(file);
}

Result

I was able to display a local image file on the Canvas.