const EL = (sel) => document.querySelector(sel);
const ctx = EL("#canvas").getContext("2d");
function readImage() {
if (!this.files || !this.files[0]) return;
const FR = new FileReader();
FR.addEventListener("load", (evt) => {
const img = new Image();
img.addEventListener("load", () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.drawImage(img, 0, 0);
});
img.src = evt.target.result;
});
FR.readAsDataURL(this.files[0]);
}
EL("#fileUpload").addEventListener("change", readImage);
canvas {display: block;}
<input type="file" id="fileUpload" />
<canvas id="canvas" width="300" height="200"></canvas>