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

package/cjs/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/cjs/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.16";
+        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/cjs/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/cjs/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/cjs/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/cjs/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);