<canvas width="400" height="300"></canvas>

let canvas = document.querySelector(`canvas`);
let context = canvas.getContext(`2d`);


class Loader {
    static loadImage(id, path){
        return new Promise((resolve, reject)=>{
            let img = new Image();
            img.onload = ()=>resolve([id, img]);
            img.onerror = reject;
            img.src = path;
        });
    }
    static async loadGroup(...loaders){
        let assets = await Promise.all(loaders);
        let map = new Map(assets);

        return map;
    }
}

class AssetsId {
    static BACKGROUND = `background`;
    static HERO = `hero`;
}

const init = async () => {
    let assets = await Loader.loadGroup(
        Loader.loadImage(AssetsId.BACKGROUND, `https://via.placeholder.com/400x300/ff6347/FFFFFF/?text=Background`),
        Loader.loadImage(AssetsId.HERO, `https://via.placeholder.com/100x100/ffdd47/FFFFFF/?text=Hero`),
    );
    
    
    context.drawImage(assets.get(AssetsId.BACKGROUND),0,0);
    context.drawImage(assets.get(AssetsId.HERO),0,0);
}

init();