Firefox drawImage() fails with an SVG image without width and height

[GoodBoyNinja]

In my project:

import image from "../assets/images/image.svg";
let options = {
	...
	shape: "image",
	imageUrl: image,
};

Particles are rendering great on safari and chrome, but on firefox the console is getting filled with these errors:
DOMException: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty

After some debugging, my best guess is that it's related to this Firefox bug:
drawImage() fails silently when drawing an SVG image without @width or @height

My image.svg indeed does not have a width and a height set, which causes the particle canvas to have a size of 0 and fail to render.

If this can't be fixed it might be worth mentioning it on the readme or displaying a dedicated error in the console when the project is not in production.

Thanks for this project, it's easy to get up and running!

[simeydotme]

Ah yes, thanks for re-surfacing this!
I also found this error ages ago, #2 issue but after reading the same bugzilla I ignored it as I assumed it would be fixed at the browser level at some point ... I guess I was wrong :/ ... what's funny though, is it looks like someone has written a fix for it 1 month ago, hah!

Let me pin this issue!

[simeydotme]

As I did in #2 resolution, the best way to avoid this right now, is to use a svg file hosted somewhere with a width/height attribute, or us a data-uri with the width/height assigned.