PNG size options not working on Safari

[gustavwilliam]

The customisable PNG sizes (except for the standard 72x72) available from the download modal don't work on Safari.

Issue

We're using OffscreenCanvas to render the custom PNG sizes, from the source file SVGs. However, this isn't available on most browsers (including Safari and Firefox), since it's an experimental features. Here's the compatibility table from MDN (sorry for non-dark mode). Doesn't look great.

Solution

We should be able to render a "hidden" Canvas element at the bottom of the screen. It's important that the element isn't visible, or affects the layout of the page. This seems like the logical solution to me, but I'm open to other solutions as well.

Here's the most relevant file: https://github.com/gustavwilliam/twemoji-utils/blob/main/src/components/converterSvgToPng.js