@tsparticles/stencil 4.2.1 → 4.3.0

package/dist/cjs/{Container-BIhHE6mu.js → Container-lKWlltNc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BIoj1BEO.js');
+var index = require('./index-CoHtf-OM.js');
 
 class BaseRange {
     position;
@@ -206,6 +206,8 @@ class AnimatableColor extends OptionsColor {
 
 class Background extends OptionLoader {
     color;
+    draw;
+    element;
     image = "";
     opacity = 1;
     position = "";
@@ -220,6 +222,8 @@ class Background extends OptionLoader {
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);
         }
+        loadProperty(this, "element", data.element);
+        loadProperty(this, "draw", data.draw);
         loadProperty(this, "image", data.image);
         loadProperty(this, "position", data.position);
         loadProperty(this, "repeat", data.repeat);
@@ -755,7 +759,7 @@ class Options extends OptionLoader {
     }
 }
 
-const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, sdrReferenceWhiteNits = 203;
+const styleCache = new Map(), maxStyleCacheSize = 2000, rgbFixedPrecision = 2, hslFixedPrecision = 2, hdrRgbFixedPrecision = 4, hdrHslFixedPrecision = 4, sdrReferenceWhiteNits = 203;
 function getCachedStyle(key, generator) {
     let cached = styleCache.get(key);
     if (!cached) {
@@ -884,19 +888,20 @@ function hslChannel(temp1, temp2, temp3) {
     }
     return temp1;
 }
-function hslToRgb(hsl) {
+function hslToRgbFloat(hsl) {
     const h = ((hsl.h % index.hMax) + index.hMax) % index.hMax, s = Math.max(index.sMin, Math.min(index.sMax, hsl.s)), l = Math.max(index.lMin, Math.min(index.lMax, hsl.l)), hNormalized = h / index.hMax, sNormalized = s / index.sMax, lNormalized = l / index.lMax;
     if (s === index.sMin) {
-        const grayscaleValue = Math.round(lNormalized * index.rgbMax);
+        const grayscaleValue = lNormalized * index.rgbMax;
         return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
     }
     const temp1 = lNormalized < index.half
         ? lNormalized * (index.sNormalizedOffset + sNormalized)
         : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = index.double * lNormalized - temp1, phaseThird = index.phaseNumerator / index.triple, red = Math.min(index.rgbMax, index.rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(index.rgbMax, index.rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(index.rgbMax, index.rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
-    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
+    return { r: red, g: green, b: blue };
 }
-function getRandomRgbColor(min) {
-    const fixedMin = index.defaultRgbMin, fixedMax = index.rgbMax + index.identity, getRgbInRangeValue = () => Math.floor(index.getRandomInRange(fixedMin, fixedMax));
+function getRandomRgbColor(min, hdr) {
+    const fixedMin = index.defaultRgbMin;
+    const fixedMax = index.rgbMax + index.identity, getRgbInRangeValue = () => Math.floor(index.getRandomInRange(fixedMin, fixedMax));
     return {
         b: getRgbInRangeValue(),
         g: getRgbInRangeValue(),
@@ -904,7 +909,7 @@ function getRandomRgbColor(min) {
     };
 }
 function getStyleFromRgb(color, hdr, opacity) {
-    const op = opacity ?? index.defaultOpacity, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const rgbPrecision = hdr ? hdrRgbFixedPrecision : rgbFixedPrecision, op = opacity ?? index.defaultOpacity, key = `rgb-${color.r.toFixed(rgbPrecision)}-${color.g.toFixed(rgbPrecision)}-${color.b.toFixed(rgbPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
 }
 function getHdrStyleFromRgb(color, opacity, peakNits = index.maxNits) {
@@ -915,9 +920,9 @@ function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? index.defaultOpacity).toString()})`;
 }
 function getStyleFromHsl(color, hdr, opacity) {
-    const op = opacity ?? index.defaultOpacity, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const hslPrecision = hdr ? hdrHslFixedPrecision : hslFixedPrecision, op = opacity ?? index.defaultOpacity, key = `hsl-${color.h.toFixed(hslPrecision)}-${color.s.toFixed(hslPrecision)}-${color.l.toFixed(hslPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => hdr
-        ? getStyleFromRgb(hslToRgb(color), true, opacity)
+        ? getStyleFromRgb(hslToRgbFloat(color), true, opacity)
         : `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${op.toString()})`);
 }
 function getHslFromAnimation(animation) {
@@ -945,10 +950,10 @@ function setTransformValue(factor, newFactor, key) {
     }
 }
 class RenderManager {
+    #backgroundElement;
+    #backgroundWarnings;
     #canvasClearPlugins;
     #canvasManager;
-    #canvasPaintPlugins;
-    #clearDrawPlugins;
     #colorPlugins;
     #container;
     #context;
@@ -956,9 +961,7 @@ class RenderManager {
     #drawParticlePlugins;
     #drawParticlesCleanupPlugins;
     #drawParticlesSetupPlugins;
-    #drawPlugins;
-    #drawSettingsCleanupPlugins;
-    #drawSettingsSetupPlugins;
+    #layers;
     #pluginManager;
     #postDrawUpdaters;
     #preDrawUpdaters;
@@ -970,18 +973,25 @@ class RenderManager {
         this.#container = container;
         this.#canvasManager = canvasManager;
         this.#context = null;
+        this.#backgroundElement = null;
+        this.#backgroundWarnings = new Set();
         this.#preDrawUpdaters = [];
         this.#postDrawUpdaters = [];
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesCleanupPlugins = [];
         this.#drawParticlesSetupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        this.#layers = {
+            0: [],
+            1: [],
+            2: [],
+            3: [],
+            4: [],
+            5: [],
+            6: [],
+            7: [],
+        };
     }
     get settings() {
         return this.#contextSettings;
@@ -995,32 +1005,38 @@ class RenderManager {
         });
     }
     clear() {
-        let pluginHandled = false;
         for (const plugin of this.#canvasClearPlugins) {
-            pluginHandled = plugin.canvasClear?.() ?? false;
-            if (pluginHandled) {
-                break;
+            if (plugin.canvasClear?.() ?? false) {
+                return;
             }
         }
-        if (pluginHandled) {
-            return;
+        for (const layer of Object.values(index.DrawLayer)) {
+            if (typeof layer === "number") {
+                for (const plugin of this.#getLayerPlugins(layer)) {
+                    if (plugin.canvasClear?.() ?? false) {
+                        return;
+                    }
+                }
+            }
         }
         this.canvasClear();
     }
     destroy() {
         this.stop();
+        this.#backgroundElement = null;
+        this.#backgroundWarnings.clear();
         this.#preDrawUpdaters = [];
         this.#postDrawUpdaters = [];
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesCleanupPlugins = [];
         this.#drawParticlesSetupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        for (const layer of Object.values(index.DrawLayer)) {
+            if (typeof layer === "number") {
+                this.#layers[layer] = [];
+            }
+        }
     }
     draw(cb) {
         const ctx = this.#context;
@@ -1077,21 +1093,40 @@ class RenderManager {
         });
     }
     drawParticles(delta) {
-        const { particles } = this.#container;
+        const { particles, actualOptions } = this.#container;
         this.clear();
         particles.update(delta);
         this.draw(ctx => {
-            for (const plugin of this.#drawSettingsSetupPlugins) {
+            const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
+            if (this.#backgroundElement) {
+                try {
+                    ctx.drawImage(this.#backgroundElement, index.originPoint.x, index.originPoint.y, width, height);
+                }
+                catch {
+                    this.#warnOnce("background-element-draw-error", "Error drawing background element onto canvas");
+                }
+            }
+            const background = actualOptions.background;
+            if (background.draw) {
+                try {
+                    background.draw(ctx, delta);
+                }
+                catch {
+                    this.#warnOnce("background-draw-error", "Error in background.draw callback");
+                }
+            }
+            for (const plugin of this.#getLayerPlugins(index.DrawLayer.BackgroundMask)) {
+                plugin.canvasPaint?.();
+            }
+            for (const plugin of this.#getLayerPlugins(index.DrawLayer.CanvasSetup)) {
                 plugin.drawSettingsSetup?.(ctx, delta);
             }
-            for (const plugin of this.#drawPlugins) {
+            for (const plugin of this.#getLayerPlugins(index.DrawLayer.PluginContent)) {
                 plugin.draw?.(ctx, delta);
             }
             particles.drawParticles(delta);
-            for (const plugin of this.#clearDrawPlugins) {
+            for (const plugin of this.#getLayerPlugins(index.DrawLayer.CanvasCleanup)) {
                 plugin.clearDraw?.(ctx, delta);
-            }
-            for (const plugin of this.#drawSettingsCleanupPlugins) {
                 plugin.drawSettingsCleanup?.(ctx, delta);
             }
         });
@@ -1099,29 +1134,24 @@ class RenderManager {
     init() {
         this.initUpdaters();
         this.initPlugins();
+        this.#resolveBackgroundElement();
         this.paint();
     }
     initPlugins() {
-        this.#colorPlugins = [];
         this.#canvasClearPlugins = [];
-        this.#canvasPaintPlugins = [];
-        this.#clearDrawPlugins = [];
+        this.#colorPlugins = [];
         this.#drawParticlePlugins = [];
         this.#drawParticlesSetupPlugins = [];
         this.#drawParticlesCleanupPlugins = [];
-        this.#drawPlugins = [];
-        this.#drawSettingsSetupPlugins = [];
-        this.#drawSettingsCleanupPlugins = [];
+        for (const layer of Object.values(index.DrawLayer)) {
+            if (typeof layer === "number") {
+                this.#layers[layer] = [];
+            }
+        }
         for (const plugin of this.#container.plugins) {
             if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
                 this.#colorPlugins.push(plugin);
             }
-            if (plugin.canvasClear) {
-                this.#canvasClearPlugins.push(plugin);
-            }
-            if (plugin.canvasPaint) {
-                this.#canvasPaintPlugins.push(plugin);
-            }
             if (plugin.drawParticle) {
                 this.#drawParticlePlugins.push(plugin);
             }
@@ -1131,17 +1161,20 @@ class RenderManager {
             if (plugin.drawParticleCleanup) {
                 this.#drawParticlesCleanupPlugins.push(plugin);
             }
-            if (plugin.draw) {
-                this.#drawPlugins.push(plugin);
+            if (plugin.canvasClear) {
+                this.#canvasClearPlugins.push(plugin);
+            }
+            if (plugin.canvasPaint) {
+                this.#getLayerPlugins(index.DrawLayer.BackgroundMask).push(plugin);
             }
             if (plugin.drawSettingsSetup) {
-                this.#drawSettingsSetupPlugins.push(plugin);
+                this.#getLayerPlugins(index.DrawLayer.CanvasSetup).push(plugin);
             }
-            if (plugin.drawSettingsCleanup) {
-                this.#drawSettingsCleanupPlugins.push(plugin);
+            if (plugin.draw) {
+                this.#getLayerPlugins(index.DrawLayer.PluginContent).push(plugin);
             }
-            if (plugin.clearDraw) {
-                this.#clearDrawPlugins.push(plugin);
+            if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
+                this.#getLayerPlugins(index.DrawLayer.CanvasCleanup).push(plugin);
             }
         }
     }
@@ -1159,7 +1192,7 @@ class RenderManager {
     }
     paint() {
         let handled = false;
-        for (const plugin of this.#canvasPaintPlugins) {
+        for (const plugin of this.#getLayerPlugins(index.DrawLayer.BackgroundMask)) {
             handled = plugin.canvasPaint?.() ?? false;
             if (handled) {
                 break;
@@ -1332,6 +1365,9 @@ class RenderManager {
         }
         drawer.beforeDraw(data);
     }
+    #getLayerPlugins(layer) {
+        return this.#layers[layer];
+    }
     #getPluginParticleColors(particle) {
         let fColor, sColor;
         for (const plugin of this.#colorPlugins) {
@@ -1349,6 +1385,39 @@ class RenderManager {
         this.#reusablePluginColors[sColorIndex] = sColor;
         return this.#reusablePluginColors;
     }
+    #resolveBackgroundElement() {
+        const background = this.#container.actualOptions.background;
+        this.#backgroundElement = null;
+        if (!background.element) {
+            return;
+        }
+        if (typeof background.element === "string") {
+            if (typeof document !== "undefined") {
+                const node = document.querySelector(background.element);
+                if (node instanceof HTMLCanvasElement || node instanceof HTMLVideoElement || node instanceof HTMLImageElement) {
+                    this.#backgroundElement = node;
+                }
+                else if (node) {
+                    this.#warnOnce("background-element-not-supported", `Background element "${background.element}" is not a supported drawable element (canvas, video, or img)`);
+                }
+                else {
+                    this.#warnOnce("background-element-not-found", `Background element selector "${background.element}" not found`);
+                }
+            }
+        }
+        else if (background.element instanceof HTMLCanvasElement ||
+            background.element instanceof OffscreenCanvas ||
+            background.element instanceof HTMLVideoElement ||
+            background.element instanceof HTMLImageElement) {
+            this.#backgroundElement = background.element;
+        }
+    }
+    #warnOnce(key, message) {
+        if (!this.#backgroundWarnings.has(key)) {
+            this.#backgroundWarnings.add(key);
+            index.getLogger().warning(message);
+        }
+    }
 }
 
 const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
@@ -1925,7 +1994,6 @@ function runParticleCreatedPlugins(container, particle) {
 }
 class Particle {
     backColor;
-    bubble;
     destroyed;
     direction;
     effect;
@@ -1959,7 +2027,6 @@ class Particle {
     shapeData;
     sides;
     size;
-    slow;
     spawning;
     strokeColor;
     strokeOpacity;
@@ -1981,18 +2048,25 @@ class Particle {
         d: 1,
     };
     #container;
+    #modifiers = [];
     #pluginManager;
     constructor(pluginManager, container) {
         this.#pluginManager = pluginManager;
         this.#container = container;
     }
+    addModifier(modifier) {
+        this.#modifiers.push(modifier);
+        this.#modifiers.sort((a, b) => a.priority - b.priority);
+    }
+    clearModifiers() {
+        this.#modifiers.length = 0;
+    }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
             return;
         }
         this.destroyed = true;
-        this.bubble.inRange = false;
-        this.slow.inRange = false;
+        this.clearModifiers();
         const container = this.#container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
         for (const plugin of container.particleDestroyedPlugins) {
@@ -2014,13 +2088,16 @@ class Particle {
         return this.rotation + (this.pathRotation ? this.velocity.angle : index.defaultAngle);
     }
     getFillColor() {
-        return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.fillColor));
+        return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.fillColor), m => m.fillColor));
     }
     getMass() {
         return this.getRadius() ** index.squareExp * Math.PI * index.half;
     }
+    getModifier(id) {
+        return this.#modifiers.find(m => m.id === id);
+    }
     getOpacity() {
-        const zIndexOptions = this.options.zIndex, zIndexFactor = index.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? index.getRangeValue(this.opacity?.value ?? index.defaultOpacity), fillOpacity = this.fillOpacity ?? index.defaultOpacity, strokeOpacity = this.strokeOpacity ?? index.defaultOpacity;
+        const zIndexOptions = this.options.zIndex, zIndexFactor = index.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = index.getRangeValue(this.opacity?.value ?? index.defaultOpacity), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? index.defaultOpacity, strokeOpacity = this.strokeOpacity ?? index.defaultOpacity;
         this.#cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
         this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
         this.#cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
@@ -2033,7 +2110,7 @@ class Particle {
         return this.#cachedPosition;
     }
     getRadius() {
-        return this.bubble.radius ?? this.size.value;
+        return this.#applyModifiers(this.size.value, m => m.radius);
     }
     getRotateData() {
         const angle = this.getAngle();
@@ -2042,7 +2119,7 @@ class Particle {
         return this.#cachedRotateData;
     }
     getStrokeColor() {
-        return this.#getRollColor(this.bubble.color ?? getHslFromAnimation(this.strokeColor));
+        return this.#getRollColor(this.#applyModifiers(getHslFromAnimation(this.strokeColor), m => m.strokeColor));
     }
     getTransformData(externalTransform) {
         const rotateData = this.getRotateData(), rotating = this.isRotating;
@@ -2062,13 +2139,6 @@ class Particle {
         this.options = resolveParticleOptions(this, container, this.#pluginManager, overrideOptions);
         container.retina.initParticle(this);
         runUpdaterPreInit(container.particleUpdaters, this);
-        this.bubble = {
-            inRange: false,
-        };
-        this.slow = {
-            inRange: false,
-            factor: 1,
-        };
         this.#initPosition(position);
         this.initialVelocity = this.#calculateVelocity();
         this.velocity = this.initialVelocity.copy();
@@ -2108,11 +2178,29 @@ class Particle {
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
+    removeModifier(id) {
+        const idx = this.#modifiers.findIndex(m => m.id === id);
+        if (idx >= index.defaultAngle) {
+            this.#modifiers.splice(idx, index.identity);
+        }
+    }
     reset() {
         for (const updater of this.#container.particleUpdaters) {
             updater.reset?.(this);
         }
     }
+    #applyModifiers(base, getter) {
+        let value = base;
+        for (const mod of this.#modifiers) {
+            if (mod.enabled) {
+                const override = getter(mod);
+                if (override !== undefined) {
+                    value = override;
+                }
+            }
+        }
+        return value;
+    }
     #calcPosition(position, zIndex) {
         let tryCount = index.defaultRetryCount, posVec = position ? index.Vector3d.create(position.x, position.y, zIndex) : undefined;
         const container = this.#container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size;

package/dist/cjs/{index-BIoj1BEO.js → index-CoHtf-OM.js}

@@ -310,29 +310,27 @@ function deepExtend(destination, ...sources) {
             }
         }
         else if (!isObject(destination) || Array.isArray(destination)) {
-            destination = {};
+            destination = Object.create(null);
         }
-        const sourceKeys = Object.keys(source), dangerousKeys = new Set(["__proto__", "constructor", "prototype"]), hasNested = sourceKeys.some(k => {
+        const sourceKeys = Object.keys(source), hasNested = sourceKeys.some(k => {
             const v = source[k];
             return isObject(v) || Array.isArray(v);
         });
         if (!hasNested) {
             const sourceDict = source, destDict = destination;
             for (const key of sourceKeys) {
-                if (dangerousKeys.has(key)) {
+                if (key === "__proto__" || key === "constructor" || key === "prototype") {
                     continue;
                 }
-                if (key in sourceDict) {
-                    const v = sourceDict[key];
-                    if (v !== undefined) {
-                        destDict[key] = v;
-                    }
+                const v = sourceDict[key];
+                if (v !== undefined) {
+                    destDict[key] = v;
                 }
             }
             continue;
         }
         for (const key of sourceKeys) {
-            if (dangerousKeys.has(key)) {
+            if (key === "__proto__" || key === "constructor" || key === "prototype") {
                 continue;
             }
             const sourceDict = source, destDict = destination, value = sourceDict[key];
@@ -748,7 +746,7 @@ class Engine {
         return this.#domArray;
     }
     get version() {
-        return "4.2.1";
+        return "4.3.0";
     }
     addEventListener(type, listener) {
         this.#eventDispatcher.addEventListener(type, listener);
@@ -783,7 +781,7 @@ class Engine {
         if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
             domSourceElement = params.element;
         }
-        const { Container } = await Promise.resolve().then(function () { return require('./Container-BIhHE6mu.js'); }), 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({
+        const { Container } = await Promise.resolve().then(function () { return require('./Container-lKWlltNc.js'); }), 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);
             },
@@ -908,6 +906,18 @@ var AnimationStatus;
     AnimationStatus["decreasing"] = "decreasing";
 })(AnimationStatus || (AnimationStatus = {}));
 
+exports.DrawLayer = void 0;
+(function (DrawLayer) {
+    DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
+    DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
+    DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
+    DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
+    DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
+    DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
+    DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
+    DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
+})(exports.DrawLayer || (exports.DrawLayer = {}));
+
 const tsParticles = initEngine();
 
 let initialized = false;

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BIoj1BEO.js');
+var index = require('./index-CoHtf-OM.js');
 
 
 

package/dist/cjs/stencil-particles.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BjS63OiI.js');
-var index$1 = require('./index-BIoj1BEO.js');
+var index$1 = require('./index-CoHtf-OM.js');
 
 const StencilParticles = class {
     constructor(hostRef) {