Class Container

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)

Constructors

constructor

Properties

_currentTheme? _delay _delayTimeout? _drawAnimationFrame? _duration _engine _eventListeners _firstStart _initialSourceOptions _intersectionManager _intersectionObserver _lastFrameTime? _lifeTime _options _paused _responsiveMaxWidth? _smooth _sourceOptions actualOptions canvas destroyed effectDrawers fpsLimit id interactivity pageHidden particles pathGenerators plugins retina shapeDrawers started zLayers

Accessors

animationStatus options sourceOptions

Methods

_nextFrame addClickHandler addLifeTime addPath alive destroy draw export handleClickMode init loadTheme pause play refresh reset start stop updateActualOptions

Constructors

constructor

  • new Container(engine, id, sourceOptions?): Container

  • This is the core class, create an instance to have a new working particles manager

    Parameters

    • engine: Engine

      the engine used by container

    • id: string

      the id to identify this instance

    • Optional sourceOptions: RecursivePartial<IOptions>

      the options to load

    Returns Container

Properties

Private Optional _currentTheme

_currentTheme?: string

Private _delay

_delay: number

Private Optional _delayTimeout

_delayTimeout?: number | Timeout

Private Optional _drawAnimationFrame

_drawAnimationFrame?: number

Private _duration

_duration: number

The container duration

Private Readonly _engine

_engine: Engine

Private Readonly _eventListeners

_eventListeners: EventListeners

Private _firstStart

_firstStart: boolean

Private _initialSourceOptions

_initialSourceOptions: undefined | RecursivePartial<IOptions>

Private Readonly _intersectionManager

_intersectionManager: ((entries) => void) = ...

Type declaration

    • (entries): void

    • Parameters

      • entries: IntersectionObserverEntry[]

      Returns void

Private Readonly _intersectionObserver

_intersectionObserver: undefined | IntersectionObserver

Private Optional _lastFrameTime

_lastFrameTime?: number

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

Private _lifeTime

_lifeTime: number

The container lifetime

Private _options

_options: Options

Private _paused

_paused: boolean

Private Optional _responsiveMaxWidth

_responsiveMaxWidth?: number

Private _smooth

_smooth: boolean

Private _sourceOptions

_sourceOptions: undefined | RecursivePartial<IOptions>

actualOptions

actualOptions: Options

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

Readonly canvas

canvas: Canvas

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

destroyed

destroyed: boolean

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

Readonly effectDrawers

effectDrawers: Map<string, IEffectDrawer<Particle>>

All the effect drawers used by the container

fpsLimit

fpsLimit: number

The container fps limit, coming from options

Readonly id

id: symbol

interactivity

interactivity: IContainerInteractivity

pageHidden

pageHidden: boolean

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

Readonly particles

particles: Particles

The particles manager

Readonly pathGenerators

pathGenerators: Map<string, IMovePathGenerator>

Readonly plugins

plugins: Map<string, IContainerPlugin>

All the plugins used by the container

Readonly retina

retina: Retina

Readonly shapeDrawers

shapeDrawers: Map<string, IShapeDrawer<Particle>>

All the shape drawers used by the container

started

started: boolean

Check if the particles container is started

zLayers

zLayers: number

Accessors

animationStatus

  • get animationStatus(): boolean

  • Gets the animation status

    Returns boolean

    true is playing, false is paused

options

sourceOptions

Methods

Private Readonly _nextFrame

addClickHandler

  • addClickHandler(callback): void

  • Adds a click handler to the container

    Parameters

    • callback: ((evt, particles?) => void)

      the callback to be called when the click event occurs

        • (evt, particles?): void

        • Parameters

          • evt: Event
          • Optional particles: Particle[]

          Returns void

    Returns void

addLifeTime

addPath

  • addPath(key, generator, override?): boolean

  • Add a new path generator to the container

    Parameters

    • key: string

      the key to identify the path generator

    • generator: IMovePathGenerator

      the path generator

    • override: boolean = false

      if true, override the existing path generator

    Returns boolean

    true if the path generator was added, false otherwise

alive

destroy

  • destroy(): void

  • Destroys the current container, invalidating it

    Returns void

draw

export

  • export(type, options?): Promise<undefined | Blob>

  • Parameters

    • type: string
    • options: Record<string, unknown> = {}

    Returns Promise<undefined | Blob>

handleClickMode

  • handleClickMode(mode): void

  • Handles click event in the container

    Parameters

    • mode: string

      click mode to handle

    Returns void

init

loadTheme

  • loadTheme(name?): Promise<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>

pause

play

  • play(force?): void

  • Starts animations and resume from pause

    Parameters

    • Optional force: boolean

    Returns void

refresh

reset

start

  • start(): Promise<void>

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

    Returns Promise<void>

stop

  • stop(): void

  • Stops the container, opposite to start. Clears some resources and stops events.

    Returns void

updateActualOptions

  • updateActualOptions(): boolean

  • Updates the container options

    Returns boolean

    true if the options were updated, false otherwise

Settings

Member Visibility

Theme

On This Page