@tsparticles/fireworks 4.5.1 → 4.5.2

package/tsparticles.fireworks.bundle.js

@@ -1,6 +1,6 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
 (function (g) {
-/* tsParticles v4.5.1 */
+/* tsParticles v4.5.2 */
 g.__tsParticlesInternals = g.__tsParticlesInternals || {};
 g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
 (function (exports) {
@@ -143,7 +143,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         }
         normalize() {
             const length = this.length;
-            if (length != none) {
+            if (length !== none) {
                 this.multTo(inverseFactorNumerator / length);
             }
         }
@@ -947,11 +947,13 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         #domArray = [];
         #eventDispatcher = new EventDispatcher();
         #initialized = false;
+        #loadSequence = 0;
+        #loadSequences = new Map();
         get items() {
             return this.#domArray;
         }
         get version() {
-            return "4.5.1";
+            return "4.5.2";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -981,44 +983,60 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             return item;
         }
         async load(params) {
-            await this.init();
             let domSourceElement;
             if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
                 domSourceElement = params.element;
             }
-            const { Container } = await Promise.resolve().then(function () { return Container$1; }), id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
-                dispatchCallback: (eventType, args) => {
-                    this.dispatchEvent(eventType, args);
-                },
-                id,
-                onDestroy: (remove) => {
-                    if (!remove) {
-                        return;
-                    }
-                    const mainArr = this.items, idx = mainArr.indexOf(newItem);
-                    if (idx >= removeMinIndex) {
-                        mainArr.splice(idx, removeDeleteCount);
+            const id = params.id ?? domSourceElement?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, loadSequence = ++this.#loadSequence;
+            this.#loadSequences.set(id, loadSequence);
+            try {
+                await this.init();
+                const { Container } = await Promise.resolve().then(function () { return Container$1; }), { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options;
+                if (this.#loadSequences.get(id) !== loadSequence) {
+                    return undefined;
+                }
+                const currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container({
+                    dispatchCallback: (eventType, args) => {
+                        this.dispatchEvent(eventType, args);
+                    },
+                    id,
+                    onDestroy: (remove) => {
+                        if (!remove) {
+                            return;
+                        }
+                        const mainArr = this.items, idx = mainArr.indexOf(newItem);
+                        if (idx >= removeMinIndex) {
+                            mainArr.splice(idx, removeDeleteCount);
+                        }
+                    },
+                    pluginManager: this.pluginManager,
+                    sourceOptions: currentOptions,
+                });
+                if (oldIndex >= loadMinIndex) {
+                    const old = this.item(oldIndex), deleteCount = old ? one : none;
+                    if (old && !old.destroyed) {
+                        old.destroy(false);
                     }
-                },
-                pluginManager: this.pluginManager,
-                sourceOptions: currentOptions,
-            });
-            if (oldIndex >= loadMinIndex) {
-                const old = this.item(oldIndex), deleteCount = old ? one : none;
-                if (old && !old.destroyed) {
-                    old.destroy(false);
+                    items.splice(oldIndex, deleteCount, newItem);
+                }
+                else {
+                    items.push(newItem);
+                }
+                const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
+                    ? params.element
+                    : getCanvasFromContainer(getDomContainer(id, domSourceElement));
+                newItem.canvas.loadCanvas(sourceCanvas);
+                await newItem.start();
+                if (newItem.destroyed) {
+                    return undefined;
                 }
-                items.splice(oldIndex, deleteCount, newItem);
+                return newItem;
             }
-            else {
-                items.push(newItem);
+            finally {
+                if (this.#loadSequences.get(id) === loadSequence) {
+                    this.#loadSequences.delete(id);
+                }
             }
-            const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
-                ? params.element
-                : getCanvasFromContainer(getDomContainer(id, domSourceElement));
-            newItem.canvas.loadCanvas(sourceCanvas);
-            await newItem.start();
-            return newItem;
         }
         async refresh(refresh = true) {
             if (!refresh) {
@@ -2718,6 +2736,13 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         }
     }
 
+    function hasEnabledBlend(particleOptions) {
+        if (!particleOptions || typeof particleOptions !== "object" || !("blend" in particleOptions)) {
+            return false;
+        }
+        const blend = particleOptions.blend;
+        return !!blend && typeof blend === "object" && "enable" in blend && !!blend.enable;
+    }
     class BlendPlugin {
         id = "blend";
         async getPlugin(container) {
@@ -2739,12 +2764,31 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             options.blend.load(source?.blend);
         }
         needsPlugin(options) {
-            return !!options?.blend?.enable || !!options?.particles?.blend?.enable;
+            if (options?.blend?.enable ||
+                options?.particles?.blend?.enable ||
+                Object.values(options?.particles?.groups ?? {}).some(hasEnabledBlend)) {
+                return true;
+            }
+            const emitters = options?.["emitters"];
+            let emitterList = [];
+            if (Array.isArray(emitters)) {
+                emitterList = emitters;
+            }
+            else if (emitters) {
+                emitterList = [emitters];
+            }
+            return emitterList.some(emitter => {
+                if (!emitter || typeof emitter !== "object" || !("particles" in emitter)) {
+                    return false;
+                }
+                const particles = emitter.particles;
+                return Array.isArray(particles) ? particles.some(hasEnabledBlend) : hasEnabledBlend(particles);
+            });
         }
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2781,7 +2825,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2829,7 +2873,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2882,7 +2926,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
@@ -2914,7 +2958,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages$1);
         }
@@ -3130,7 +3174,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -3459,7 +3503,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3538,7 +3582,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3593,7 +3637,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3678,7 +3722,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3687,7 +3731,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -4018,7 +4062,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadDestroyUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("destroy", container => {
                 return Promise.resolve(new DestroyUpdater(e.pluginManager, container));
@@ -4263,7 +4307,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     })(EmitterClickMode || (EmitterClickMode = {}));
 
     async function loadEmittersPluginSimple(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
             addErrorMessages(ErrorMessages);
         }
@@ -4412,7 +4456,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadEmittersShapeSquare(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register((e) => {
             ensureEmittersPluginLoaded(e);
             e.pluginManager.addEmitterShapeGenerator?.("square", new EmittersSquareShapeGenerator());
@@ -4556,7 +4600,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadLifeUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("life", container => {
                 return Promise.resolve(new LifeUpdater(container));
@@ -4582,7 +4626,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadLineShape(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["line"], () => Promise.resolve(new LineDrawer()));
         });
@@ -4686,7 +4730,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadRotateUpdater(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("rotate", container => {
                 return Promise.resolve(new RotateUpdater(container));
@@ -5002,7 +5046,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     async function loadSoundsPlugin(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new SoundsPlugin(e));
         });
@@ -5010,7 +5054,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.5.1");
+        engine.checkVersion("4.5.2");
         await engine.pluginManager.register(async (e) => {
             const loadEmittersForFireworks = async (e) => {
                 await loadEmittersPluginSimple(e);
@@ -5057,7 +5101,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     fireworks.init = async () => {
         await initPlugins(tsParticles);
     };
-    fireworks.version = "4.5.1";
+    fireworks.version = "4.5.2";
     globalThis.fireworks = fireworks;
 
     const globalObject = globalThis;
@@ -5226,7 +5270,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             });
         }
         drawParticles(delta) {
-            const { particles, actualOptions } = this.#container, clearedPlugin = this.clear();
+            const { particles, actualOptions } = this.#container;
+            this.clear();
             particles.update(delta);
             this.draw(ctx => {
                 const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
@@ -5248,9 +5293,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     }
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
-                    if (plugin !== clearedPlugin) {
-                        plugin.canvasPaint?.();
-                    }
+                    plugin.canvasPaint?.();
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
@@ -5340,6 +5383,9 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 ctx.clearRect(originPoint.x, originPoint.y, this.#canvasManager.size.width, this.#canvasManager.size.height);
             });
         }
+        updateBackgroundElement() {
+            this.#resolveBackgroundElement();
+        }
         #applyPostDrawUpdaters(particle) {
             for (const updater of this.#postDrawUpdaters) {
                 updater.afterDraw?.(particle);
@@ -5538,7 +5584,14 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             }
             if (typeof background.element === "string") {
                 if (typeof document !== "undefined") {
-                    const node = document.querySelector(background.element);
+                    let node;
+                    try {
+                        node = document.querySelector(background.element);
+                    }
+                    catch {
+                        this.#warnOnce("background-element-invalid-selector", `Background element selector "${background.element}" is invalid`);
+                        return;
+                    }
                     if (node && this.#isSupportedElement(node)) {
                         this.#backgroundElement = node;
                     }
@@ -6362,10 +6415,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             runParticleCreatedPlugins(container, this);
         }
         isInsideCanvas(direction) {
-            return this.#getInsideCanvasResult({ direction }).inside;
+            return this.#getInsideCanvasResult(direction).inside;
         }
         isInsideCanvasForOutMode(outMode, direction) {
-            return this.#getInsideCanvasResult({ direction, outMode }).inside;
+            return this.#getInsideCanvasResult(direction, outMode).inside;
         }
         isShowingBack() {
             if (!this.roll) {
@@ -6482,7 +6535,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             });
         }
         #getDefaultInsideCanvasResult(direction, outMode) {
-            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce;
+            const radius = this.getRadius(), canvasSize = this.#container.canvas.size, position = this.position, isBounce = outMode === exports.OutMode.bounce || outMode === exports.OutMode.split;
             if (direction === exports.OutModeDirection.bottom) {
                 return {
                     inside: isBounce ? position.y + radius < canvasSize.height : position.y - radius < canvasSize.height,
@@ -6524,12 +6577,16 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                 radius: this.getRadius(),
             };
         }
-        #getInsideCanvasResult(data) {
-            const defaultResult = this.#getDefaultInsideCanvasResult(data.direction, data.outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined, shapeCheck = shapeDrawer?.isInsideCanvas, effectCheck = effectDrawer?.isInsideCanvas;
-            if (!shapeCheck && !effectCheck) {
+        #getInsideCanvasResult(direction, outMode) {
+            const defaultResult = this.#getDefaultInsideCanvasResult(direction, outMode), container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined, effectDrawer = this.effect ? container.effectDrawers.get(this.effect) : undefined;
+            if (!shapeDrawer?.isInsideCanvas && !effectDrawer?.isInsideCanvas) {
                 return defaultResult;
             }
-            const callbackData = this.#getInsideCanvasCallbackData(data.direction, data.outMode), shapeResult = shapeCheck ? this.#normalizeInsideCanvasResult(shapeCheck(callbackData), "shape") : undefined, effectResult = effectCheck ? this.#normalizeInsideCanvasResult(effectCheck(callbackData), "effect") : undefined;
+            const callbackData = this.#getInsideCanvasCallbackData(direction, outMode), shapeResult = shapeDrawer?.isInsideCanvas
+                ? this.#normalizeInsideCanvasResult(shapeDrawer.isInsideCanvas(callbackData), "shape")
+                : undefined, effectResult = effectDrawer?.isInsideCanvas
+                ? this.#normalizeInsideCanvasResult(effectDrawer.isInsideCanvas(callbackData), "effect")
+                : undefined;
             if (shapeResult && effectResult) {
                 const margin = Math.max(shapeResult.margin ?? defaultAngle, effectResult.margin ?? defaultAngle);
                 return {
@@ -6595,8 +6652,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
     }
 
     class SpatialHashGrid {
-        #cellSize;
         #cells = new Map();
+        #cellSize;
         #circlePool = [];
         #circlePoolIdx;
         #pendingCellSize;
@@ -7254,8 +7311,8 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
         particleCreatedPlugins;
         particleDestroyedPlugins;
         particlePositionPlugins;
-        particleUpdaters;
         particles;
+        particleUpdaters;
         peakNits;
         plugins;
         retina;
@@ -7549,6 +7606,7 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
                     refresh = plugin.updateActualOptions() || refresh;
                 }
             }
+            this.canvas.render.updateBackgroundElement();
             return refresh;
         }
         #initPlugins(allContainerPlugins) {
@@ -8531,6 +8589,10 @@ g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
             if (this.options.spawn.stroke?.color) {
                 this.spawnStrokeColor = rangeColorToHsl(this.#pluginManager, this.options.spawn.stroke.color);
             }
+            const spawnFill = this.options.spawn.fill, spawnStroke = this.options.spawn.stroke;
+            this.spawnFillOpacity = spawnFill?.opacity === undefined ? defaultOpacity$1 : getRangeValue(spawnFill.opacity);
+            this.spawnStrokeOpacity = spawnStroke?.opacity === undefined ? defaultOpacity$1 : getRangeValue(spawnStroke.opacity);
+            this.spawnStrokeWidth = spawnStroke?.width === undefined ? defaultStrokeWidth : getRangeValue(spawnStroke.width);
             this.#paused = !this.options.autoPlay;
             this.#particlesOptions = particlesOptions;
             this.#size = this.#calcSize();