This is the core class, create an instance to have a new working particles manager
the engine used by container
the id to identify this instance
Optional sourceOptions: RecursivePartial<IOptions>the options to load
Private Optional _currentPrivate _delayPrivate Optional _delayPrivate Optional _drawPrivate Readonly _enginePrivate Readonly _eventPrivate _firstPrivate Readonly _initialPrivate Readonly _intersectionPrivate _optionsPrivate _pausedPrivate _sourceThe options loaded by the container, it's a full Options object
Readonly canvasCanvas object, in charge of the canvas element and drawing functions
Check if the particles' container is destroyed, if so it's not recommended using it
Readonly drawersAll the shape drawers used by the container
The container duration
The container fps limit, coming from options
Readonly frameThe container frame manager
Readonly idthe id to identify this instance
Optional lastLast frame time, used for delta values, for keeping animation correct in lower frame rates
The container lifetime
The container check if it's hidden on the web page
Readonly particlesThe particles manager
Readonly pluginsAll the plugins used by the container
Optional responsiveReadonly retinaCheck if the particles container is started
The options that were initially passed to the container
Private _intersectionAdds a click handler to the container
Add a new path generator to the container
the key to identify the path generator
Optional generator: IMovePathGeneratorthe path generator
if true, override the existing path generator
Exports the current canvas image, background property of options won't be rendered because it's css related
The callback to handle the image
Optional type: stringThe exported image type
Optional quality: numberThe exported image quality
this method is deprecated, please use the exportImage method
The callback to handle the image
Customise path generation
Use the new setPath
Optional noiseOrGenerator: IMovePathGenerator | ((particle: Particle) => Vector)the IMovePathGenerator object or a function that generates a Vector object from Particle
Optional init: (() => void)the IMovePathGenerator init function, if the first parameter is a generator function
Optional update: (() => void)the IMovePathGenerator update function, if the first parameter is a generator function
Customise path generation
Use the new addPath
Optional pathOrGenerator: IMovePathGenerator | ((particle: Particle) => Vector)the IMovePathGenerator object or a function that generates a Vector object from Particle
Optional init: (() => void)the IMovePathGenerator init function, if the first parameter is a generator function
Optional update: (() => void)the IMovePathGenerator update function, if the first parameter is a generator function
The object loaded into an HTML element, it'll contain options loaded and all data to let everything working
Particles Container
The {@link Container} class is the manager of the entire tsParticles instance. If you get the result of {@link Engine.load | tsParticles.load} the result it's this class, in the {@link Engine.loadJSON | tsParticles.loadJSON} is the
thenparameter.Otherwise you can retrieve any loaded instance using {@link Engine.dom | tsParticles.dom()} or {@link Engine.domItem | tsParticles.domItem(index)}.
Properties
{@link Container.id}: the {@link Container} id, normally is the related DOM element {@link Container.id} attribute. It's set by {@link Engine.load | tsParticles.load()} and {@link Engine.loadJSON | tsParticles.loadJSON()}.
{@link Container.options}: Where to find the current options loaded. Changing this options while playing can result in an unexpected behavior. A {@link refresh | refresh()} after the change is the best thing to do.
{@link Container.sourceOptions}: The options used when the {@link Container} was created, these options will be used only in the constructor.
{@link Container.particles}: The particles manager, you can add/remove particles from here.
Methods
{@link Container.play | play()}: Used to resume the animations, can be stopped using {@link pause | pause()}.
{@link Container.pause | pause()}: Used to pause the animations, can be restarted using {@link play | play()}.
{@link Container.destroy | destroy()}: Prepare the instance to destruction, you won't retrieve this instance anymore. Only if you have a variable set with it.
{@link Container.exportImage | exportImage(callback, type?, quality?)}: Exports an image of the canvas (without the background property if set), type and quality are optional and are the image output type and quality.
{@link Container.exportConfiguration | exportConfiguration()}: Exports the current configuration in JSON, returns a string
{@link Container.start | start()}: Starts the container, it's different from {@link play | play()}, this will reload everything.
{@link Container.stop | stop()}: Stops the container, it's different from {@link pause | pause()}, this will clean up what need to be reloaded.
{@link Container.refresh | refresh()}: Restarts the container, just a {@link stop | stop()}/{@link start | start()} shortcut.
{@link Container.loadTheme | loadTheme(name)}: Sets the specified theme reloading options, if name is
undefinedthe default theme will be used (if set)