Chris Coyier, the developer behind css-tricks.com recently tweeted:

Chris Coyier

@chriscoyier

Write the article you wish you found when you googled something.

19:27 PM - 30 Oct 2017

And so I'm about to do exactly that. I've been working on a web app game recently and I was bringing in some images dynamically using the Fetch API, and then drawing them on to a <canvas>. My simplified version of what I was doing was this:

async function getPicture(url) {
    return fetch(url)
    .then(x => x.blob())
    .then(x => createImageBitmap(x));
}

This worked great on Chrome. And not anywhere else for some reason. Even though ImageBitmap is in the HTML spec.

And so after a really long time, I came up with the following polyfill:

Feel free to use it anywhere you like, and save yourself the headache that I've had for so long.

Edit: ImageBitmap works on Firefox, but recently I've been using ES6 Modules as well, which aren't enabled in Firefox by default at the time of this writing.