tsparticles 1.42.0 → 1.42.3

package/tsparticles.engine.js

@@ -2515,9 +2515,9 @@
       paint() {
         const options = this.container.actualOptions;
         this.draw((ctx => {
-          if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+          if (options.backgroundMask.enable && options.backgroundMask.cover) {
             clear(ctx, this.size);
-            this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
+            this.paintBase(this.coverColorStyle);
           } else {
             this.paintBase();
           }
@@ -2560,11 +2560,16 @@
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
+        const newSize = {
+          width: this.element.offsetWidth * pxRatio,
+          height: this.element.offsetHeight * pxRatio
+        };
+        if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {
+          return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
           this.resizeFactor = {
             width: size.width / oldSize.width,
@@ -2688,12 +2693,13 @@
         const color = cover.color;
         const coverRgb = colorToRgb(color);
         if (coverRgb) {
-          this.coverColor = {
+          const coverColor = {
             r: coverRgb.r,
             g: coverRgb.g,
             b: coverRgb.b,
             a: cover.opacity
           };
+          this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
         }
       }
       initTrail() {
@@ -5902,9 +5908,7 @@
         delete container.canvas.resizeFactor;
       }
       async draw(delta) {
-        const container = this.container;
-        container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
+        const container = this.container, canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
         await this.update(delta);
         if (this.needsSort) {
@@ -5912,6 +5916,7 @@
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
           this.needsSort = false;
         }
+        container.canvas.clear();
         for (const [, plugin] of container.plugins) {
           container.canvas.drawPlugin(plugin, delta);
         }