Make it possible to pass in a DOM Element instead of an id

Is your feature request related to a problem? Please describe. The current implementation requires you to add an id to a container or canvas, and pass that id when initialising tsparticles. Since most frameworks make it possible to get access to DOM references it would be nice if that was also supported.

This would allow frameworks like Svelte or Ember to implement a wrapper as an action or modifier respectively. (Other frameworks might have similar functionality.)

Describe the solution you’d like Make it possible to initialise tsparticles like this:

tsparticles.load(canvasOrContainerElement, options)

Describe alternatives you’ve considered Keep the current id string only api

Additional context

Potential Svelte wrapper api:

<div use:tsparticles={options}></div>

Potential Ember wrapper api:

<canvas {{tsparticles this.options}}></canvas>

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.98. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[matteobruni]

The id is not linked by the Dom with the set method, is used by tsParticles internally to retrieve same containers and avoid duplicates by destroying the old and create a new one. In the load method the id is used to retrieve the DOM element and it’s set to the particles container too.