How does the image source position influence the result

Question

Recently I started learning to code in Javascript. One of the practice exercises I am working on is very simple: have a canvas and a 'file upload' option which accepts only images. Then display the image on the web page. The first problem encountered is having broken images as soon as I try to upload an image on my pc.

Trying to solve it, I input image.src = "" instead of using the selected file to see if it'd work. Then I observed that if I use the commented image.src line, the image would be displayed. But if I use the uncommented image.src within the upload() function, no image would be displayed.

Can anyone explain, in simple human language, why this happens and also how to solve the broken images problem?

Thanks in advance,

S

var image = new Image;

//image.src = "C:\\Users\\skuip\\Desktop\\JS-Folder\\NewTest\\img\\maarten_fietsen_regen.jpeg";

var context = document.getElementById('myCanvas').getContext('2d');
function drawSquare() {
    context.fillRect(0, 0, 150, 75);
}

function upload() {
    file = document.getElementById('finput');
    image.src = "C:\\Users\\skuip\\Desktop\\JS-Folder\\NewTest\\img\\maarten_fietsen_regen.jpeg";
    context.drawImage(image, 0, 0);
}