How can I display the uploaded PSD file in a canvas element using javascript?

I want to show a PSD file that I uploaded to the input element as a photo in the canvas element. I tried an example for this but it didn't work. Where am I doing wrong?

in script.js

         var PSD = require('psd');

        // Load from URL
        PSD.fromURL(e.target.result).then(function(psd) {
            console.log("PSD UPLOADED");
            console.log(psd);
            document.getElementById("the-canvas").appendChild(psd.image.toPng());
        }).catch((error)=> {console.log(error)})

in html.js

<input type="file">
<canvas id="the-canvas"></canvas>