Node JS: Preview downloading images*

I am making a node.js app that will be primarily used to download images from the web. I have created this function that successfully downloads images. I want to make the function also show a live preview of the image as it is downloading without impacting download speed. Is it possible to "tap the pipe" and draw the image as it downloads to a html canvas or img? I am using electron so I am looking for a chromium/node.js based solution.

Edit: I've also found out you can chain pipes (r.pipe(file).pipe(canvas);) but I'm not sure if that would download the file first and then show up on the canvas or if it would update them both as the file downloads.

I've also thought of creating two separate pipes from the request (var r = request(url); r.pipe(file); r.pipe(canvas);), but I'm not sure if that would try to download the image twice.

I'm also not particularly familiar with the html canvas and haven't been able to test these ideas because I don't know how to pipe a image to a canvas or an img element for display in the application.

const fs = require('fs-extra');
downloadFile(url, filename) {
    return new Promise(resolve => {
        var path = filename.substring(0, filename.lastIndexOf('\\'));
        if (!fs.existsSync(path)) fs.ensureDirSync(path);
            var file = fs.createWriteStream(filename);
            var r = request(url).pipe(file);
            // How would also pipe this to a canvas or img element?
            r.on('error', function(err) { console.log(err); throw new Error('Error downloading file') });
            r.on('finish', function() { file.close(); resolve('done'); });         
    });
}