tsparticles 1.37.6 → 1.39.2

package/browser/slim.js

@@ -1,48 +1,48 @@
+import { loadAngleUpdater } from "./Updaters/Angle";
 import { loadCircleShape } from "./Shapes/Circle";
-import { loadLifeUpdater } from "./Updaters/Life";
-import { loadExternalConnectInteraction } from "./Interactions/External/Connect";
-import { loadOpacityUpdater } from "./Updaters/Opacity";
-import { loadImageShape } from "./Shapes/Image";
-import { loadPolygonShape } from "./Shapes/Polygon";
-import { loadExternalBubbleInteraction } from "./Interactions/External/Bubble";
+import { loadColorUpdater } from "./Updaters/Color";
 import { loadExternalAttractInteraction } from "./Interactions/External/Attract";
+import { loadExternalBounceInteraction } from "./Interactions/External/Bounce";
+import { loadExternalBubbleInteraction } from "./Interactions/External/Bubble";
+import { loadExternalConnectInteraction } from "./Interactions/External/Connect";
 import { loadExternalGrabInteraction } from "./Interactions/External/Grab";
-import { loadStarShape } from "./Shapes/Star";
-import { loadParticlesAttractInteraction } from "./Interactions/Particles/Attract";
-import { loadSquareShape } from "./Shapes/Square";
-import { loadStrokeColorUpdater } from "./Updaters/StrokeColor";
-import { loadColorUpdater } from "./Updaters/Color";
-import { loadParticlesCollisionsInteraction } from "./Interactions/Particles/Collisions";
-import { loadAngleUpdater } from "./Updaters/Angle";
-import { loadOutModesUpdater } from "./Updaters/OutModes";
 import { loadExternalRepulseInteraction } from "./Interactions/External/Repulse";
+import { loadImageShape } from "./Shapes/Image";
+import { loadLifeUpdater } from "./Updaters/Life";
 import { loadLineShape } from "./Shapes/Line";
-import { loadExternalBounceInteraction } from "./Interactions/External/Bounce";
-import { loadTextShape } from "./Shapes/Text";
+import { loadOpacityUpdater } from "./Updaters/Opacity";
+import { loadOutModesUpdater } from "./Updaters/OutModes";
+import { loadParticlesAttractInteraction } from "./Interactions/Particles/Attract";
+import { loadParticlesCollisionsInteraction } from "./Interactions/Particles/Collisions";
 import { loadParticlesLinksInteraction } from "./Interactions/Particles/Links";
+import { loadPolygonShape } from "./Shapes/Polygon";
 import { loadSizeUpdater } from "./Updaters/Size";
-export async function loadSlim(tsParticles) {
-    await loadExternalAttractInteraction(tsParticles);
-    await loadExternalBounceInteraction(tsParticles);
-    await loadExternalBubbleInteraction(tsParticles);
-    await loadExternalConnectInteraction(tsParticles);
-    await loadExternalGrabInteraction(tsParticles);
-    await loadExternalRepulseInteraction(tsParticles);
-    await loadParticlesAttractInteraction(tsParticles);
-    await loadParticlesCollisionsInteraction(tsParticles);
-    await loadParticlesLinksInteraction(tsParticles);
-    await loadCircleShape(tsParticles);
-    await loadImageShape(tsParticles);
-    await loadLineShape(tsParticles);
-    await loadPolygonShape(tsParticles);
-    await loadSquareShape(tsParticles);
-    await loadStarShape(tsParticles);
-    await loadTextShape(tsParticles);
-    await loadLifeUpdater(tsParticles);
-    await loadOpacityUpdater(tsParticles);
-    await loadSizeUpdater(tsParticles);
-    await loadAngleUpdater(tsParticles);
-    await loadColorUpdater(tsParticles);
-    await loadStrokeColorUpdater(tsParticles);
-    await loadOutModesUpdater(tsParticles);
+import { loadSquareShape } from "./Shapes/Square";
+import { loadStarShape } from "./Shapes/Star";
+import { loadStrokeColorUpdater } from "./Updaters/StrokeColor";
+import { loadTextShape } from "./Shapes/Text";
+export async function loadSlim(engine) {
+    await loadExternalAttractInteraction(engine);
+    await loadExternalBounceInteraction(engine);
+    await loadExternalBubbleInteraction(engine);
+    await loadExternalConnectInteraction(engine);
+    await loadExternalGrabInteraction(engine);
+    await loadExternalRepulseInteraction(engine);
+    await loadParticlesAttractInteraction(engine);
+    await loadParticlesCollisionsInteraction(engine);
+    await loadParticlesLinksInteraction(engine);
+    await loadCircleShape(engine);
+    await loadImageShape(engine);
+    await loadLineShape(engine);
+    await loadPolygonShape(engine);
+    await loadSquareShape(engine);
+    await loadStarShape(engine);
+    await loadTextShape(engine);
+    await loadLifeUpdater(engine);
+    await loadOpacityUpdater(engine);
+    await loadSizeUpdater(engine);
+    await loadAngleUpdater(engine);
+    await loadColorUpdater(engine);
+    await loadStrokeColorUpdater(engine);
+    await loadOutModesUpdater(engine);
 }

package/{esm/main.d.ts → engine.d.ts}

@@ -1,9 +1,7 @@
+import type { Container, IInteractor, IMovePathGenerator, IParticleUpdater, IPlugin, IShapeDrawer, Particle } from "./Core";
+import type { RecursivePartial, ShapeDrawerAfterEffectFunction, ShapeDrawerDestroyFunction, ShapeDrawerDrawFunction, ShapeDrawerInitFunction, SingleOrMultiple } from "./Types";
 import type { IOptions } from "./Options/Interfaces/IOptions";
-import type { Container } from "./Core/Container";
-import type { ShapeDrawerAfterEffectFunction, ShapeDrawerDestroyFunction, ShapeDrawerDrawFunction, ShapeDrawerInitFunction, RecursivePartial, SingleOrMultiple } from "./Types";
-import type { Particle } from "./Core/Particle";
-import type { IInteractor, IMovePathGenerator, IParticleUpdater, IPlugin, IShapeDrawer } from "./Core/Interfaces";
-export declare class Main {
+export declare class Engine {
     #private;
     constructor();
     init(): void;

package/{main.js → engine.js}

@@ -10,44 +10,43 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _Main_initialized;
+var _Engine_initialized;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Main = void 0;
-const Utils_1 = require("./Utils");
-const Loader_1 = require("./Core/Loader");
-class Main {
+exports.Engine = void 0;
+const Core_1 = require("./Core");
+class Engine {
     constructor() {
-        _Main_initialized.set(this, void 0);
-        __classPrivateFieldSet(this, _Main_initialized, false, "f");
+        _Engine_initialized.set(this, void 0);
+        __classPrivateFieldSet(this, _Engine_initialized, false, "f");
     }
     init() {
-        if (!__classPrivateFieldGet(this, _Main_initialized, "f")) {
-            __classPrivateFieldSet(this, _Main_initialized, true, "f");
+        if (!__classPrivateFieldGet(this, _Engine_initialized, "f")) {
+            __classPrivateFieldSet(this, _Engine_initialized, true, "f");
         }
     }
     async loadFromArray(tagId, options, index) {
-        return Loader_1.Loader.load(tagId, options, index);
+        return Core_1.Loader.load(tagId, options, index);
     }
     async load(tagId, options) {
-        return Loader_1.Loader.load(tagId, options);
+        return Core_1.Loader.load(tagId, options);
     }
     async set(id, element, options) {
-        return Loader_1.Loader.set(id, element, options);
+        return Core_1.Loader.set(id, element, options);
     }
     async loadJSON(tagId, pathConfigJson, index) {
-        return Loader_1.Loader.loadJSON(tagId, pathConfigJson, index);
+        return Core_1.Loader.loadJSON(tagId, pathConfigJson, index);
     }
     async setJSON(id, element, pathConfigJson, index) {
-        return Loader_1.Loader.setJSON(id, element, pathConfigJson, index);
+        return Core_1.Loader.setJSON(id, element, pathConfigJson, index);
     }
     setOnClickHandler(callback) {
-        Loader_1.Loader.setOnClickHandler(callback);
+        Core_1.Loader.setOnClickHandler(callback);
     }
     dom() {
-        return Loader_1.Loader.dom();
+        return Core_1.Loader.dom();
     }
     domItem(index) {
-        return Loader_1.Loader.domItem(index);
+        return Core_1.Loader.domItem(index);
     }
     async refresh() {
         for (const instance of this.dom()) {
@@ -67,29 +66,29 @@ class Main {
         else {
             customDrawer = drawer;
         }
-        Utils_1.Plugins.addShapeDrawer(shape, customDrawer);
+        Core_1.Plugins.addShapeDrawer(shape, customDrawer);
         await this.refresh();
     }
     async addPreset(preset, options, override = false) {
-        Utils_1.Plugins.addPreset(preset, options, override);
+        Core_1.Plugins.addPreset(preset, options, override);
         await this.refresh();
     }
     async addPlugin(plugin) {
-        Utils_1.Plugins.addPlugin(plugin);
+        Core_1.Plugins.addPlugin(plugin);
         await this.refresh();
     }
     async addPathGenerator(name, generator) {
-        Utils_1.Plugins.addPathGenerator(name, generator);
+        Core_1.Plugins.addPathGenerator(name, generator);
         await this.refresh();
     }
     async addInteractor(name, interactorInitializer) {
-        Utils_1.Plugins.addInteractor(name, interactorInitializer);
+        Core_1.Plugins.addInteractor(name, interactorInitializer);
         await this.refresh();
     }
     async addParticleUpdater(name, updaterInitializer) {
-        Utils_1.Plugins.addParticleUpdater(name, updaterInitializer);
+        Core_1.Plugins.addParticleUpdater(name, updaterInitializer);
         await this.refresh();
     }
 }
-exports.Main = Main;
-_Main_initialized = new WeakMap();
+exports.Engine = Engine;
+_Engine_initialized = new WeakMap();

package/esm/Core/Canvas.d.ts

@@ -1,6 +1,6 @@
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 import type { Container } from "./Container";
 import type { Particle } from "./Particle";
-import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
 export declare class Canvas {
     private readonly container;
     element?: HTMLCanvasElement;
@@ -13,11 +13,11 @@ export declare class Canvas {
     private originalStyle?;
     constructor(container: Container);
     init(): void;
-    loadCanvas(canvas: HTMLCanvasElement, generatedCanvas?: boolean): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
     destroy(): void;
     paint(): void;
     clear(): void;
-    windowResize(): void;
+    windowResize(): Promise<void>;
     resize(): void;
     drawConnectLine(p1: IParticle, p2: IParticle): void;
     drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;

package/esm/Core/Canvas.js

@@ -1,5 +1,5 @@
-import { colorToHsl, colorToRgb, Constants, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
-import { clear } from "../Utils";
+import { clear, colorToHsl, colorToRgb, deepExtend, drawConnectLine, drawGrabLine, drawParticle, drawParticlePlugin, drawPlugin, getStyleFromHsl, getStyleFromRgb, gradient, paintBase, } from "../Utils";
+import { Constants } from "./Utils";
 export class Canvas {
     constructor(container) {
         this.container = container;
@@ -18,15 +18,15 @@ export class Canvas {
         this.initBackground();
         this.paint();
     }
-    loadCanvas(canvas, generatedCanvas) {
+    loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-            canvas.className = Constants.canvasClass;
-        }
         if (this.generatedCanvas) {
             (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        this.generatedCanvas = generatedCanvas !== null && generatedCanvas !== void 0 ? generatedCanvas : this.generatedCanvas;
+        this.generatedCanvas =
+            canvas.dataset && Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Constants.generatedAttribute] === "true"
+                : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = deepExtend({}, this.element.style);
         this.size.height = canvas.offsetHeight;
@@ -71,7 +71,7 @@ export class Canvas {
             });
         }
     }
-    windowResize() {
+    async windowResize() {
         if (!this.element) {
             return;
         }
@@ -85,7 +85,7 @@ export class Canvas {
             }
         }
         if (needsRefresh) {
-            container.refresh();
+            await container.refresh();
         }
     }
     resize() {
@@ -273,12 +273,12 @@ export class Canvas {
         const originalStyle = this.originalStyle;
         if (options.fullScreen.enable) {
             this.originalStyle = deepExtend({}, element.style);
-            element.style.position = "fixed";
-            element.style.zIndex = options.fullScreen.zIndex.toString(10);
-            element.style.top = "0";
-            element.style.left = "0";
-            element.style.width = "100%";
-            element.style.height = "100%";
+            element.style.setProperty("position", "fixed", "important");
+            element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+            element.style.setProperty("top", "0", "important");
+            element.style.setProperty("left", "0", "important");
+            element.style.setProperty("width", "100%", "important");
+            element.style.setProperty("height", "100%", "important");
         }
         else if (originalStyle) {
             element.style.position = originalStyle.position;
@@ -288,6 +288,16 @@ export class Canvas {
             element.style.width = originalStyle.width;
             element.style.height = originalStyle.height;
         }
+        for (const key in options.style) {
+            if (!key || !options.style) {
+                continue;
+            }
+            const value = options.style[key];
+            if (!value) {
+                continue;
+            }
+            element.style.setProperty(key, value, "important");
+        }
     }
     paintBase(baseColor) {
         this.draw((ctx) => {

package/esm/Core/Container.d.ts

@@ -1,13 +1,12 @@
+import { FrameManager, Vector } from "./Utils";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
 import { Canvas } from "./Canvas";
-import { Particles } from "./Particles";
-import { Retina } from "./Retina";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import { FrameManager } from "./FrameManager";
-import type { RecursivePartial } from "../Types";
 import { Options } from "../Options/Classes/Options";
 import { Particle } from "./Particle";
-import { Vector } from "./Particle/Vector";
-import { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import { Particles } from "./Particles";
+import type { RecursivePartial } from "../Types";
+import { Retina } from "./Retina";
 export declare class Container {
     readonly id: string;
     started: boolean;

package/esm/Core/Container.js

@@ -1,10 +1,9 @@
+import { EventListeners, FrameManager, Plugins, Vector } from "./Utils";
+import { animate, cancelAnimation, getRangeValue } from "../Utils";
 import { Canvas } from "./Canvas";
+import { Options } from "../Options/Classes/Options";
 import { Particles } from "./Particles";
 import { Retina } from "./Retina";
-import { FrameManager } from "./FrameManager";
-import { Options } from "../Options/Classes/Options";
-import { animate, cancelAnimation, EventListeners, getRangeValue, Plugins } from "../Utils";
-import { Vector } from "./Particle/Vector";
 export class Container {
     constructor(id, sourceOptions, ...presets) {
         this.id = id;

package/esm/Core/Interfaces/Gradients.d.ts

@@ -1,7 +1,7 @@
-import type { IColor } from "./Colors";
 import type { GradientType, RotateDirectionAlt } from "../../Enums";
-import type { RotateDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { RangeValue } from "../../Types";
+import type { RotateDirection } from "../../Enums";
 export interface IGradientColorOpacity {
     value: RangeValue;
 }

package/esm/Core/Interfaces/ICircleBouncer.d.ts

@@ -1,5 +1,5 @@
-import type { Vector } from "../Particle/Vector";
 import type { ICoordinates } from "./ICoordinates";
+import type { Vector } from "../Utils";
 export interface ICircleBouncer {
     position: ICoordinates;
     velocity: Vector;

package/esm/Core/Interfaces/IContainerPlugin.d.ts

@@ -1,10 +1,10 @@
+import type { ClickMode, OutModeDirection } from "../../Enums";
+import type { IColor } from "./Colors";
 import type { ICoordinates } from "./ICoordinates";
+import type { IDelta } from "./IDelta";
+import type { IOptions } from "../../Options/Interfaces/IOptions";
 import type { Particle } from "../Particle";
-import type { ClickMode, OutModeDirection } from "../../Enums";
 import type { RecursivePartial } from "../../Types";
-import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { IDelta } from "./IDelta";
-import type { IColor } from "./Colors";
 export interface IContainerPlugin {
     clickPositionValid?: (position: ICoordinates) => boolean;
     draw?: (context: CanvasRenderingContext2D, delta: IDelta) => void;

package/esm/Core/Interfaces/IExternalInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
 export interface IExternalInteractor extends IInteractor {
     isEnabled(): boolean;
     interact(delta: IDelta): void;

package/esm/Core/Interfaces/IInteractor.d.ts

@@ -1,5 +1,5 @@
-import type { Particle } from "../Particle";
 import type { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
 export interface IInteractor {
     type: InteractorType;
     reset(particle: Particle): void;

package/esm/Core/Interfaces/IMovePathGenerator.d.ts

@@ -1,6 +1,6 @@
 import type { Container } from "../Container";
 import type { Particle } from "../Particle";
-import { Vector } from "../Particle/Vector";
+import { Vector } from "../Utils";
 export interface IMovePathGenerator {
     generate: (particle: Particle) => Vector;
     init: (container: Container) => void;

package/esm/Core/Interfaces/IParticle.d.ts

@@ -1,17 +1,17 @@
-import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
-import type { ICoordinates3d } from "./ICoordinates";
-import type { ShapeType } from "../../Enums";
+import type { IHsl, IRgb } from "./Colors";
 import type { IParticleTiltValueAnimation, IParticleValueAnimation } from "./IParticleValueAnimation";
-import type { IShapeValues } from "./IShapeValues";
 import type { IBubbleParticleData } from "./IBubbleParticleData";
-import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
-import type { IHsl, IRgb } from "./Colors";
-import type { IParticleHslAnimation } from "./IParticleHslAnimation";
-import type { Vector } from "../Particle/Vector";
+import type { ICoordinates3d } from "./ICoordinates";
 import type { IParticleGradientAnimation } from "./IParticleGradientAnimation";
+import type { IParticleHslAnimation } from "./IParticleHslAnimation";
 import type { IParticleRetinaProps } from "./IParticleRetinaProps";
 import type { IParticleRoll } from "./IParticleRoll";
 import type { IParticleWobble } from "./IParticleWobble";
+import type { IParticles } from "../../Options/Interfaces/Particles/IParticles";
+import type { IShapeValues } from "./IShapeValues";
+import type { IStroke } from "../../Options/Interfaces/Particles/IStroke";
+import type { ShapeType } from "../../Enums";
+import type { Vector } from "../Utils";
 export interface IParticle {
     misplaced: boolean;
     randomIndexData?: number;

package/esm/Core/Interfaces/IParticleGradientAnimation.d.ts

@@ -1,6 +1,6 @@
-import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 import type { GradientType } from "../../Enums";
 import type { IParticleGradientColorAnimation } from "./IParticleGradientColorAnimation";
+import type { IParticleValueAnimation } from "./IParticleValueAnimation";
 export interface IParticleGradientAnimation {
     angle: IParticleValueAnimation<number>;
     type: GradientType;

package/esm/Core/Interfaces/IParticleSpin.d.ts

@@ -1,5 +1,5 @@
-import type { RotateDirection } from "../../Enums";
 import type { ICoordinates } from "./ICoordinates";
+import type { RotateDirection } from "../../Enums";
 export interface IParticleSpin {
     acceleration: number;
     angle: number;

package/esm/Core/Interfaces/IParticlesInteractor.d.ts

@@ -1,6 +1,6 @@
-import type { Particle } from "../Particle";
-import type { IInteractor } from "./IInteractor";
 import type { IDelta } from "./IDelta";
+import type { IInteractor } from "./IInteractor";
+import type { Particle } from "../Particle";
 export interface IParticlesInteractor extends IInteractor {
     isEnabled(particle: Particle): boolean;
     interact(particle: Particle, delta: IDelta): void;

package/esm/Core/Interfaces/IPlugin.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../Container";
 import type { IContainerPlugin } from "./IContainerPlugin";
 import type { IOptions } from "../../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../../Types";
 import type { Options } from "../../Options/Classes/Options";
+import type { RecursivePartial } from "../../Types";
 export interface IPlugin {
     readonly id: string;
     needsPlugin(options?: RecursivePartial<IOptions>): boolean;

package/esm/Core/Interfaces/index.d.ts

@@ -19,13 +19,15 @@ export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
 export * from "./IParticleHslAnimation";
+export * from "./IParticlesInteractor";
 export * from "./IParticleLife";
 export * from "./IParticleLoops";
 export * from "./IParticleRetinaProps";
+export * from "./IParticleRoll";
 export * from "./IParticleSpin";
 export * from "./IParticleUpdater";
 export * from "./IParticleValueAnimation";
-export * from "./IParticlesInteractor";
+export * from "./IParticleWobble";
 export * from "./IPlugin";
 export * from "./IRangeValue";
 export * from "./IRectSideResult";

package/esm/Core/Interfaces/index.js

@@ -19,13 +19,15 @@ export * from "./IParticle";
 export * from "./IParticleGradientAnimation";
 export * from "./IParticleGradientColorAnimation";
 export * from "./IParticleHslAnimation";
+export * from "./IParticlesInteractor";
 export * from "./IParticleLife";
 export * from "./IParticleLoops";
 export * from "./IParticleRetinaProps";
+export * from "./IParticleRoll";
 export * from "./IParticleSpin";
 export * from "./IParticleUpdater";
 export * from "./IParticleValueAnimation";
-export * from "./IParticlesInteractor";
+export * from "./IParticleWobble";
 export * from "./IPlugin";
 export * from "./IRangeValue";
 export * from "./IRectSideResult";

package/esm/Core/Loader.d.ts

@@ -1,7 +1,7 @@
 import { Container } from "./Container";
 import type { IOptions } from "../Options/Interfaces/IOptions";
-import type { RecursivePartial } from "../Types";
 import type { Particle } from "./Particle";
+import type { RecursivePartial } from "../Types";
 import type { SingleOrMultiple } from "../Types";
 interface LoaderParams {
     element?: HTMLElement;

package/esm/Core/Loader.js

@@ -1,5 +1,6 @@
+import { Constants } from "./Utils";
 import { Container } from "./Container";
-import { Constants, itemFromArray } from "../Utils";
+import { itemFromArray } from "../Utils";
 const tsParticlesDom = [];
 function fetchError(statusCode) {
     console.error(`Error tsParticles - fetch status: ${statusCode}`);
@@ -38,24 +39,19 @@ export class Loader {
             }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
             canvasEl = domContainer;
-            generatedCanvas = false;
+            canvasEl.dataset[Constants.generatedAttribute] = "false";
         }
         else {
             const existingCanvases = domContainer.getElementsByTagName("canvas");
             if (existingCanvases.length) {
                 canvasEl = existingCanvases[0];
-                if (!canvasEl.className) {
-                    canvasEl.className = Constants.canvasClass;
-                }
-                generatedCanvas = false;
+                canvasEl.dataset[Constants.generatedAttribute] = "false";
             }
             else {
-                generatedCanvas = true;
                 canvasEl = document.createElement("canvas");
-                canvasEl.className = Constants.canvasClass;
+                canvasEl.dataset[Constants.generatedAttribute] = "true";
                 canvasEl.style.width = "100%";
                 canvasEl.style.height = "100%";
                 domContainer.appendChild(canvasEl);
@@ -68,7 +64,7 @@ export class Loader {
         else {
             dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
     }

package/esm/Core/Particle.d.ts

@@ -1,14 +1,11 @@
+import { ShapeType } from "../Enums";
+import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleRetinaProps, IParticleRoll, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IParticleWobble, IRgb, IShapeValues } from "./Interfaces";
+import { Vector, Vector3d } from "./Utils";
 import type { Container } from "./Container";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
-import { ShapeType } from "../Enums";
 import type { RecursivePartial } from "../Types";
 import type { Stroke } from "../Options/Classes/Particles/Stroke";
-import { Vector } from "./Particle/Vector";
-import type { IBubbleParticleData, ICoordinates, ICoordinates3d, IDelta, IHsl, IParticle, IParticleGradientAnimation, IParticleHslAnimation, IParticleLife, IParticleNumericValueAnimation, IParticleSpin, IParticleTiltValueAnimation, IParticleValueAnimation, IRgb, IShapeValues, IParticleRetinaProps } from "./Interfaces";
-import { Vector3d } from "./Particle/Vector3d";
-import { IParticleRoll } from "./Interfaces/IParticleRoll";
-import { IParticleWobble } from "./Interfaces/IParticleWobble";
 export declare class Particle implements IParticle {
     readonly id: number;
     readonly container: Container;