load an image from an input file into canvas tag

gistfile1.js

 function loadCanvasWithInputFile(){
	// canvas
	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext("2d"); 
	var fileinput = document.getElementById('ab'); // input file
	var img = new Image();

	fileinput.onchange = function(evt) {
	    var files = evt.target.files; // FileList object
	    var file = files[0];
	    if(file.type.match('image.*')) {
	        var reader = new FileReader();
	        // Read in the image file as a data URL.
	        reader.readAsDataURL(file);
	    	reader.onload = function(evt){
	    		if( evt.target.readyState == FileReader.DONE) {
	    			img.src = evt.target.result;
				context.drawImage(img,100,100);
			}
	    	}    

	    } else {
	        alert("not an image");
	    }
	};
}

But if we upload new image it did't replace it

And there is many other issues in this code we have to upload twice to upload a single image some time image didn't show up

The loading problem mentioned by @Caster101 can be fixed by replacing line 18 with:

img.onload = () => cxt.drawImage(img, 100, 100);

to wait to draw the image until after it has loaded.

THANK YOU SO MUCH!!!!