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 then parameter.

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 undefined the default theme will be used (if set)

Hierarchy

  • Container

Constructors

Properties

_currentTheme?: string
_drawAnimationFrame?: number
_engine: Engine
_eventListeners: EventListeners
_firstStart: boolean
_initialSourceOptions: undefined | RecursivePartial<IOptions>
_intersectionObserver: undefined | IntersectionObserver
_options: Options
_paused: boolean
_sourceOptions: undefined | RecursivePartial<IOptions>
actualOptions: Options

The options loaded by the container, it's a full Options object

canvas: Canvas

Canvas object, in charge of the canvas element and drawing functions

destroyed: boolean

Check if the particles' container is destroyed, if so it's not recommended using it

drawers: Map<string, IShapeDrawer>

All the shape drawers used by the container

duration: number

The container duration

fpsLimit: number

The container fps limit, coming from options

frameManager: FrameManager

The container frame manager

id: string
lastFrameTime?: number

Last frame time, used for delta values, for keeping animation correct in lower frame rates

lifeTime: number

The container lifetime

pageHidden: boolean

The container check if it's hidden on the web page

particles: Particles

The particles manager

pathGenerators: Map<string, IMovePathGenerator>
plugins: Map<string, IContainerPlugin>

All the plugins used by the container

responsiveMaxWidth?: number
retina: Retina
smooth: boolean
started: boolean

Check if the particles container is started

zLayers: number

Accessors

Methods

  • Add a new path generator to the container

    Parameters

    • key: string

      the key to identify the path generator

    • Optional generator: IMovePathGenerator

      the path generator

    • override: boolean = false

      if true, override the existing path generator

    Returns boolean

  • Exports the current configuration using options property

    Returns

    a JSON string created from options property

    Returns string

  • Exports the current canvas image, background property of options won't be rendered because it's css related

    Parameters

    • callback: BlobCallback

      The callback to handle the image

    • Optional type: string

      The exported image type

    • Optional quality: number

      The exported image quality

    Returns void

  • Handles click event in the container

    Parameters

    • mode: string

      click mode to handle

    Returns void

  • Loads the given theme, overriding the options

    Parameters

    • Optional name: string

      the theme name, if undefined resets the default options or the default theme

    Returns Promise<void>

  • Starts animations and resume from pause

    Parameters

    • Optional force: boolean

    Returns void

  • Customise path generation

    Deprecated

    Use the new setPath

    Parameters

    • 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

        • (): void
        • Returns void

    • Optional update: (() => void)

      the IMovePathGenerator update function, if the first parameter is a generator function

        • (): void
        • Returns void

    Returns void

  • Customise path generation

    Deprecated

    Use the new addPath

    Parameters

    • 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

        • (): void
        • Returns void

    • Optional update: (() => void)

      the IMovePathGenerator update function, if the first parameter is a generator function

        • (): void
        • Returns void

    Returns void

  • Starts the container, initializes what are needed to create animations and event handling

    Returns Promise<void>