@tsparticles/engine 4.0.0-beta.15 → 4.0.0-beta.17

package/esm/Core/CanvasManager.js

@@ -2,6 +2,25 @@ import { cloneStyle, getFullScreenStyle, safeMatchMedia, safeMutationObserver }
 import { defaultZoom, generatedAttribute, half } from "./Utils/Constants.js";
 import { getStyleFromRgb, rangeColorToRgb } from "../Utils/ColorUtils.js";
 import { RenderManager } from "./RenderManager.js";
+const transferredCanvases = new WeakMap(), getTransferredCanvas = (canvas) => {
+    const transferredCanvas = transferredCanvases.get(canvas);
+    if (transferredCanvas) {
+        return transferredCanvas;
+    }
+    if (typeof canvas.transferControlToOffscreen !== "function") {
+        throw new TypeError("OffscreenCanvas is required but not supported by this browser");
+    }
+    try {
+        const offscreenCanvas = canvas.transferControlToOffscreen();
+        transferredCanvases.set(canvas, offscreenCanvas);
+        return offscreenCanvas;
+    }
+    catch {
+        throw new TypeError("OffscreenCanvas transfer failed");
+    }
+}, isHtmlCanvasElement = (canvas) => {
+    return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
+};
 function setStyle(canvas, style, important = false) {
     if (!style) {
         return;
@@ -32,8 +51,9 @@ function setStyle(canvas, style, important = false) {
     }
 }
 export class CanvasManager {
-    element;
+    domElement;
     render;
+    renderCanvas;
     size;
     zoom = defaultZoom;
     _container;
@@ -68,9 +88,10 @@ export class CanvasManager {
     destroy() {
         this.stop();
         if (this._generated) {
-            const element = this.element;
+            const element = this.domElement;
             element?.remove();
-            this.element = undefined;
+            this.domElement = undefined;
+            this.renderCanvas = undefined;
         }
         else {
             this._resetOriginalStyle();
@@ -103,16 +124,17 @@ export class CanvasManager {
         this._initStyle();
         this.initBackground();
         this._safeMutationObserver(obs => {
-            if (!this.element || !(this.element instanceof Node)) {
+            const element = this.domElement;
+            if (!element || !(element instanceof Node)) {
                 return;
             }
-            obs.observe(this.element, { attributes: true });
+            obs.observe(element, { attributes: true });
         });
         this.initPlugins();
         this.render.init();
     }
     initBackground() {
-        const { _container } = this, options = _container.actualOptions, background = options.background, element = this.element;
+        const { _container } = this, options = _container.actualOptions, background = options.background, element = this.domElement;
         if (!element) {
             return;
         }
@@ -137,21 +159,30 @@ export class CanvasManager {
         }
     }
     loadCanvas(canvas) {
-        if (this._generated && this.element) {
-            this.element.remove();
+        if (this._generated && this.domElement) {
+            this.domElement.remove();
+        }
+        const container = this._container, domCanvas = isHtmlCanvasElement(canvas) ? canvas : undefined;
+        this.domElement = domCanvas;
+        this._generated = domCanvas ? domCanvas.dataset[generatedAttribute] === "true" : false;
+        this.renderCanvas = domCanvas ? getTransferredCanvas(domCanvas) : canvas;
+        const domElement = this.domElement;
+        if (domElement) {
+            domElement.ariaHidden = "true";
+            this._originalStyle = cloneStyle(domElement.style);
+        }
+        const standardSize = this._standardSize, renderCanvas = this.renderCanvas;
+        if (domElement) {
+            standardSize.height = domElement.offsetHeight;
+            standardSize.width = domElement.offsetWidth;
+        }
+        else {
+            standardSize.height = renderCanvas.height;
+            standardSize.width = renderCanvas.width;
         }
-        const container = this._container;
-        this._generated =
-            generatedAttribute in canvas.dataset ? canvas.dataset[generatedAttribute] === "true" : this._generated;
-        this.element = canvas;
-        this.element.ariaHidden = "true";
-        this._originalStyle = cloneStyle(this.element.style);
-        const standardSize = this._standardSize;
-        standardSize.height = canvas.offsetHeight;
-        standardSize.width = canvas.offsetWidth;
         const pxRatio = this._container.retina.pixelRatio, retinaSize = this.size;
-        canvas.height = retinaSize.height = standardSize.height * pxRatio;
-        canvas.width = retinaSize.width = standardSize.width * pxRatio;
+        renderCanvas.height = retinaSize.height = standardSize.height * pxRatio;
+        renderCanvas.width = retinaSize.width = standardSize.width * pxRatio;
         const canSupportHdrQuery = safeMatchMedia("(color-gamut: p3)");
         this.render.setContextSettings({
             alpha: true,
@@ -159,42 +190,48 @@ export class CanvasManager {
             desynchronized: true,
             willReadFrequently: false,
         });
-        this.render.setContext(this.element.getContext("2d", this.render.settings));
+        this.render.setContext(renderCanvas.getContext("2d", this.render.settings));
         this._safeMutationObserver(obs => {
             obs.disconnect();
         });
         container.retina.init();
         this.initBackground();
         this._safeMutationObserver(obs => {
-            if (!this.element || !(this.element instanceof Node)) {
+            const element = this.domElement;
+            if (!element || !(element instanceof Node)) {
                 return;
             }
-            obs.observe(this.element, { attributes: true });
+            obs.observe(element, { attributes: true });
         });
     }
     resize() {
-        if (!this.element) {
+        const element = this.domElement;
+        if (!element) {
+            return false;
+        }
+        const container = this._container, renderCanvas = this.renderCanvas;
+        if (renderCanvas === undefined) {
             return false;
         }
-        const container = this._container, currentSize = container.canvas._standardSize, newSize = {
-            width: this.element.offsetWidth,
-            height: this.element.offsetHeight,
+        const currentSize = container.canvas._standardSize, newSize = {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
         }, pxRatio = container.retina.pixelRatio, retinaSize = {
             width: newSize.width * pxRatio,
             height: newSize.height * pxRatio,
         };
         if (newSize.height === currentSize.height &&
             newSize.width === currentSize.width &&
-            retinaSize.height === this.element.height &&
-            retinaSize.width === this.element.width) {
+            retinaSize.height === renderCanvas.height &&
+            retinaSize.width === renderCanvas.width) {
             return false;
         }
         const oldSize = { ...currentSize };
         currentSize.height = newSize.height;
         currentSize.width = newSize.width;
         const canvasSize = this.size;
-        this.element.width = canvasSize.width = retinaSize.width;
-        this.element.height = canvasSize.height = retinaSize.height;
+        renderCanvas.width = canvasSize.width = retinaSize.width;
+        renderCanvas.height = canvasSize.height = retinaSize.height;
         if (this._container.started) {
             container.particles.setResizeFactor({
                 width: currentSize.width / oldSize.width,
@@ -204,7 +241,7 @@ export class CanvasManager {
         return true;
     }
     setPointerEvents(type) {
-        const element = this.element;
+        const element = this.domElement;
         if (!element) {
             return;
         }
@@ -223,7 +260,7 @@ export class CanvasManager {
         this.render.stop();
     }
     async windowResize() {
-        if (!this.element || !this.resize()) {
+        if (!this.domElement || !this.resize()) {
             return;
         }
         const container = this._container, needsRefresh = container.updateActualOptions();
@@ -239,7 +276,7 @@ export class CanvasManager {
         }
     };
     _initStyle = () => {
-        const element = this.element, options = this._container.actualOptions;
+        const element = this.domElement, options = this._container.actualOptions;
         if (!element) {
             return;
         }
@@ -261,7 +298,7 @@ export class CanvasManager {
         }
     };
     _repairStyle = () => {
-        const element = this.element;
+        const element = this.domElement;
         if (!element) {
             return;
         }
@@ -281,7 +318,7 @@ export class CanvasManager {
         });
     };
     _resetOriginalStyle = () => {
-        const element = this.element, originalStyle = this._originalStyle;
+        const element = this.domElement, originalStyle = this._originalStyle;
         if (!element || !originalStyle) {
             return;
         }
@@ -294,7 +331,7 @@ export class CanvasManager {
         callback(this._mutationObserver);
     };
     _setFullScreenStyle = () => {
-        const element = this.element;
+        const element = this.domElement;
         if (!element) {
             return;
         }

package/esm/Core/Engine.js

@@ -32,7 +32,7 @@ const getCanvasFromContainer = (domContainer) => {
         }
     }
     else {
-        const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases[canvasFirstIndex];
+        const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
         if (foundCanvas) {
             canvasEl = foundCanvas;
             canvasEl.dataset[generatedAttribute] = generatedFalse;
@@ -69,7 +69,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.15";
+        return "4.0.0-beta.17";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
@@ -100,7 +100,11 @@ export class Engine {
     }
     async load(params) {
         await this.init();
-        const { Container } = await import("./Container.js"), id = params.id ?? params.element?.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({
+        let domSourceElement;
+        if (typeof HTMLElement !== "undefined" && params.element instanceof HTMLElement) {
+            domSourceElement = params.element;
+        }
+        const { Container } = await import("./Container.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);
             },
@@ -127,8 +131,10 @@ export class Engine {
         else {
             items.push(newItem);
         }
-        const domContainer = getDomContainer(id, params.element), canvasEl = getCanvasFromContainer(domContainer);
-        newItem.canvas.loadCanvas(canvasEl);
+        const sourceCanvas = typeof OffscreenCanvas !== "undefined" && params.element instanceof OffscreenCanvas
+            ? params.element
+            : getCanvasFromContainer(getDomContainer(id, domSourceElement));
+        newItem.canvas.loadCanvas(sourceCanvas);
         await newItem.start();
         return newItem;
     }

package/esm/Core/Particle.js

@@ -242,8 +242,6 @@ export class Particle {
         this._initPosition(position);
         this.initialVelocity = this._calculateVelocity();
         this.velocity = this.initialVelocity.copy();
-        const particles = container.particles;
-        particles.setLastZIndex(this.position.z);
         this.zIndexFactor = this.position.z / container.zLayers;
         this.sides = 24;
         let effectDrawer, shapeDrawer;
@@ -393,7 +391,7 @@ export class Particle {
         return color;
     };
     _initPosition = position => {
-        const container = this._container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+        const container = this._container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
         if (!initialPosition) {
             throw new Error("a valid position cannot be found for particle");
         }

package/esm/Core/ParticlesManager.js

@@ -1,4 +1,4 @@
-import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
+import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, double, empty, minCount, minIndex, minLimit, one, spatialHashGridCellSize, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
@@ -12,10 +12,8 @@ export class ParticlesManager {
     _container;
     _groupLimits;
     _limit;
-    _maxZIndex;
-    _minZIndex;
-    _needsSort;
     _nextId;
+    _particleBuckets;
     _particleResetPlugins;
     _particleUpdatePlugins;
     _pluginManager;
@@ -24,19 +22,17 @@ export class ParticlesManager {
     _postUpdatePlugins;
     _resizeFactor;
     _updatePlugins;
-    _zArray;
+    _zBuckets;
     constructor(pluginManager, container) {
         this._pluginManager = pluginManager;
         this._container = container;
         this._nextId = 0;
         this._array = [];
-        this._zArray = [];
         this._pool = [];
         this._limit = 0;
         this._groupLimits = new Map();
-        this._needsSort = false;
-        this._minZIndex = 0;
-        this._maxZIndex = 0;
+        this._particleBuckets = new Map();
+        this._zBuckets = this._createBuckets(this._container.zLayers);
         this.grid = new SpatialHashGrid(spatialHashGridCellSize);
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
@@ -80,7 +76,7 @@ export class ParticlesManager {
                 return;
             }
             this._array.push(particle);
-            this._zArray.push(particle);
+            this._insertParticleIntoBucket(particle);
             this._nextId++;
             this._container.dispatchEvent(EventType.particleAdded, {
                 particle,
@@ -94,12 +90,14 @@ export class ParticlesManager {
     }
     clear() {
         this._array = [];
-        this._zArray = [];
+        this._particleBuckets.clear();
+        this._resetBuckets(this._container.zLayers);
     }
     destroy() {
         this._array = [];
         this._pool.length = 0;
-        this._zArray = [];
+        this._particleBuckets.clear();
+        this._zBuckets = [];
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
         this._particleUpdatePlugins = [];
@@ -108,8 +106,14 @@ export class ParticlesManager {
         this._updatePlugins = [];
     }
     drawParticles(delta) {
-        for (const particle of this._zArray) {
-            particle.draw(delta);
+        for (let i = this._zBuckets.length - one; i >= minIndex; i--) {
+            const bucket = this._zBuckets[i];
+            if (!bucket) {
+                continue;
+            }
+            for (const particle of bucket) {
+                particle.draw(delta);
+            }
         }
     }
     filter(condition) {
@@ -123,15 +127,14 @@ export class ParticlesManager {
     }
     async init() {
         const container = this._container, options = container.actualOptions;
-        this._minZIndex = 0;
-        this._maxZIndex = 0;
-        this._needsSort = false;
         this.checkParticlePositionPlugins = [];
         this._updatePlugins = [];
         this._particleUpdatePlugins = [];
         this._postUpdatePlugins = [];
         this._particleResetPlugins = [];
         this._postParticleUpdatePlugins = [];
+        this._particleBuckets.clear();
+        this._resetBuckets(container.zLayers);
         this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
         for (const plugin of container.plugins) {
             if (plugin.redrawInit) {
@@ -232,79 +235,25 @@ export class ParticlesManager {
         }
         this._applyDensity(options.particles, pluginsCount);
     }
-    setLastZIndex(zIndex) {
-        this._needsSort ||= zIndex >= this._maxZIndex || (zIndex > this._minZIndex && zIndex < this._maxZIndex);
-    }
     setResizeFactor(factor) {
         this._resizeFactor = factor;
     }
     update(delta) {
-        const particlesToDelete = new Set();
         this.grid.clear();
         for (const plugin of this._updatePlugins) {
             plugin.update?.(delta);
         }
-        const resizeFactor = this._resizeFactor;
-        for (const particle of this._array) {
-            if (resizeFactor && !particle.ignoresResizeRatio) {
-                particle.position.x *= resizeFactor.width;
-                particle.position.y *= resizeFactor.height;
-                particle.initialPosition.x *= resizeFactor.width;
-                particle.initialPosition.y *= resizeFactor.height;
-            }
-            particle.ignoresResizeRatio = false;
-            for (const plugin of this._particleResetPlugins) {
-                plugin.particleReset?.(particle);
-            }
-            for (const plugin of this._particleUpdatePlugins) {
-                if (particle.destroyed) {
-                    break;
-                }
-                plugin.particleUpdate?.(particle, delta);
-            }
-            if (particle.destroyed) {
-                particlesToDelete.add(particle);
-                continue;
-            }
-            this.grid.insert(particle);
-        }
+        const particlesToDelete = this._updateParticlesPhase1(delta);
         for (const plugin of this._postUpdatePlugins) {
             plugin.postUpdate?.(delta);
         }
-        for (const particle of this._array) {
-            if (particle.destroyed) {
-                particlesToDelete.add(particle);
-                continue;
-            }
-            for (const updater of this._container.particleUpdaters) {
-                updater.update(particle, delta);
-            }
-            if (!particle.destroyed && !particle.spawning) {
-                for (const plugin of this._postParticleUpdatePlugins) {
-                    plugin.postParticleUpdate?.(particle, delta);
-                }
-            }
-            else if (particle.destroyed) {
-                particlesToDelete.add(particle);
-            }
-        }
+        this._updateParticlesPhase2(delta, particlesToDelete);
         if (particlesToDelete.size) {
             for (const particle of particlesToDelete) {
                 this.remove(particle);
             }
         }
         delete this._resizeFactor;
-        if (this._needsSort) {
-            const zArray = this._zArray;
-            zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);
-            const firstItem = zArray[minIndex], lastItem = zArray[zArray.length - lengthOffset];
-            if (!firstItem || !lastItem) {
-                return;
-            }
-            this._maxZIndex = firstItem.position.z;
-            this._minZIndex = lastItem.position.z;
-            this._needsSort = false;
-        }
     }
     _addToPool = (...particles) => {
         this._pool.push(...particles);
@@ -334,13 +283,52 @@ export class ParticlesManager {
             this.removeQuantity(particlesCount - particlesNumber, group);
         }
     };
+    _createBuckets = (zLayers) => {
+        const bucketCount = Math.max(Math.floor(zLayers), one);
+        return Array.from({ length: bucketCount }, () => []);
+    };
+    _getBucketIndex = (zIndex) => {
+        const maxBucketIndex = this._zBuckets.length - one;
+        if (maxBucketIndex <= minIndex) {
+            return minIndex;
+        }
+        return Math.min(Math.max(Math.floor(zIndex), minIndex), maxBucketIndex);
+    };
+    _getParticleInsertIndex = (bucket, particleId) => {
+        let start = minIndex, end = bucket.length;
+        while (start < end) {
+            const middle = Math.floor((start + end) / double), middleParticle = bucket[middle];
+            if (!middleParticle) {
+                end = middle;
+                continue;
+            }
+            if (middleParticle.id < particleId) {
+                start = middle + one;
+            }
+            else {
+                end = middle;
+            }
+        }
+        return start;
+    };
     _initDensityFactor = densityOptions => {
         const container = this._container;
-        if (!container.canvas.element || !densityOptions.enable) {
+        if (!densityOptions.enable) {
             return defaultDensityFactor;
         }
-        const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
-        return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
+        const canvasSize = container.canvas.size, pxRatio = container.retina.pixelRatio;
+        if (!canvasSize.width || !canvasSize.height) {
+            return defaultDensityFactor;
+        }
+        return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
+    };
+    _insertParticleIntoBucket = (particle) => {
+        const bucketIndex = this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        if (!bucket) {
+            return;
+        }
+        bucket.splice(this._getParticleInsertIndex(bucket, particle.id), empty, particle);
+        this._particleBuckets.set(particle.id, bucketIndex);
     };
     _removeParticle = (index, group, override) => {
         const particle = this._array[index];
@@ -350,9 +338,8 @@ export class ParticlesManager {
         if (particle.group !== group) {
             return false;
         }
-        const zIdx = this._zArray.indexOf(particle);
         this._array.splice(index, deleteCount);
-        this._zArray.splice(zIdx, deleteCount);
+        this._removeParticleFromBucket(particle);
         particle.destroy(override);
         this._container.dispatchEvent(EventType.particleRemoved, {
             particle,
@@ -360,4 +347,96 @@ export class ParticlesManager {
         this._addToPool(particle);
         return true;
     };
+    _removeParticleFromBucket = (particle) => {
+        const bucketIndex = this._particleBuckets.get(particle.id) ?? this._getBucketIndex(particle.position.z), bucket = this._zBuckets[bucketIndex];
+        if (!bucket) {
+            this._particleBuckets.delete(particle.id);
+            return;
+        }
+        const particleIndex = this._getParticleInsertIndex(bucket, particle.id);
+        if (bucket[particleIndex]?.id !== particle.id) {
+            this._particleBuckets.delete(particle.id);
+            return;
+        }
+        bucket.splice(particleIndex, deleteCount);
+        this._particleBuckets.delete(particle.id);
+    };
+    _resetBuckets = (zLayers) => {
+        const bucketCount = Math.max(Math.floor(zLayers), one);
+        if (this._zBuckets.length !== bucketCount) {
+            this._zBuckets = this._createBuckets(bucketCount);
+            return;
+        }
+        for (const bucket of this._zBuckets) {
+            bucket.length = minIndex;
+        }
+    };
+    _updateParticleBucket = (particle) => {
+        const newBucketIndex = this._getBucketIndex(particle.position.z), currentBucketIndex = this._particleBuckets.get(particle.id);
+        if (currentBucketIndex === undefined) {
+            this._insertParticleIntoBucket(particle);
+            return;
+        }
+        if (currentBucketIndex === newBucketIndex) {
+            return;
+        }
+        const currentBucket = this._zBuckets[currentBucketIndex];
+        if (currentBucket) {
+            const particleIndex = this._getParticleInsertIndex(currentBucket, particle.id);
+            if (currentBucket[particleIndex]?.id === particle.id) {
+                currentBucket.splice(particleIndex, deleteCount);
+            }
+        }
+        const newBucket = this._zBuckets[newBucketIndex];
+        if (!newBucket) {
+            this._particleBuckets.set(particle.id, newBucketIndex);
+            return;
+        }
+        newBucket.splice(this._getParticleInsertIndex(newBucket, particle.id), empty, particle);
+        this._particleBuckets.set(particle.id, newBucketIndex);
+    };
+    _updateParticlesPhase1 = (delta) => {
+        const particlesToDelete = new Set(), resizeFactor = this._resizeFactor;
+        for (const particle of this._array) {
+            if (resizeFactor && !particle.ignoresResizeRatio) {
+                particle.position.x *= resizeFactor.width;
+                particle.position.y *= resizeFactor.height;
+                particle.initialPosition.x *= resizeFactor.width;
+                particle.initialPosition.y *= resizeFactor.height;
+            }
+            particle.ignoresResizeRatio = false;
+            for (const plugin of this._particleResetPlugins) {
+                plugin.particleReset?.(particle);
+            }
+            for (const plugin of this._particleUpdatePlugins) {
+                if (particle.destroyed) {
+                    break;
+                }
+                plugin.particleUpdate?.(particle, delta);
+            }
+            if (particle.destroyed) {
+                particlesToDelete.add(particle);
+                continue;
+            }
+            this.grid.insert(particle);
+        }
+        return particlesToDelete;
+    };
+    _updateParticlesPhase2 = (delta, particlesToDelete) => {
+        for (const particle of this._array) {
+            if (particle.destroyed) {
+                particlesToDelete.add(particle);
+                continue;
+            }
+            for (const updater of this._container.particleUpdaters) {
+                updater.update(particle, delta);
+            }
+            if (!particle.spawning) {
+                for (const plugin of this._postParticleUpdatePlugins) {
+                    plugin.postParticleUpdate?.(particle, delta);
+                }
+            }
+            this._updateParticleBucket(particle);
+        }
+    };
 }

package/esm/Core/Retina.js

@@ -13,9 +13,8 @@ export class Retina {
         const container = this.container, options = container.actualOptions;
         this.pixelRatio = options.detectRetina ? devicePixelRatio : defaultRatio;
         this.reduceFactor = defaultReduceFactor;
-        const ratio = this.pixelRatio, canvas = container.canvas;
-        if (canvas.element) {
-            const element = canvas.element;
+        const ratio = this.pixelRatio, canvas = container.canvas, element = canvas.domElement;
+        if (element) {
             canvas.size.width = element.offsetWidth * ratio;
             canvas.size.height = element.offsetHeight * ratio;
         }

package/esm/Core/Utils/EventListeners.js

@@ -66,7 +66,7 @@ export class EventListeners {
             manageListener(globalThis, resizeEvent, handlers.resize, add);
             return;
         }
-        const canvasEl = container.canvas.element;
+        const canvasEl = container.canvas.domElement;
         if (this._resizeObserver && !add) {
             if (canvasEl) {
                 this._resizeObserver.unobserve(canvasEl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-beta.15",
+  "version": "4.0.0-beta.17",
   "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "scripts": {