@tsparticles/plugin-canvas-mask 3.0.0-alpha.1 → 3.0.0-beta.0

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Canvas Mask Plugin
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-canvas-mask/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-canvas-mask)
-[![npmjs](https://badge.fury.io/js/tsparticles-plugin-canvas-mask.svg)](https://www.npmjs.com/package/tsparticles-plugin-canvas-mask)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-canvas-mask)](https://www.npmjs.com/package/tsparticles-plugin-canvas-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-canvas-mask/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-canvas-mask)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-canvas-mask.svg)](https://www.npmjs.com/package/@tsparticles/plugin-canvas-mask)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-canvas-mask)](https://www.npmjs.com/package/@tsparticles/plugin-canvas-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles canvas mask effect.
 
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the plugin like thi
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-plugin-canvas-mask
+$ npm install @tsparticles/plugin-canvas-mask
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-plugin-canvas-mask
+$ yarn add @tsparticles/plugin-canvas-mask
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadCanvasMaskPlugin } = require("tsparticles-plugin-canvas-mask");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadCanvasMaskPlugin } = require("@tsparticles/plugin-canvas-mask");
 
-loadCanvasMaskPlugin(tsParticles); // awaitable
+(async () => {
+  await loadCanvasMaskPlugin(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadCanvasMaskPlugin } from "tsparticles-plugin-canvas-mask";
+import { tsParticles } from "@tsparticles/engine";
+import { loadCanvasMaskPlugin } from "@tsparticles/plugin-canvas-mask";
 
-loadCanvasMaskPlugin(tsParticles); // awaitable
+(async () => {
+  await loadCanvasMaskPlugin(tsParticles);
+})();
 ```

package/browser/CanvasMaskInstance.js

@@ -6,7 +6,7 @@ export class CanvasMaskInstance {
     }
     async init() {
         const container = this._container, options = container.actualOptions.canvasMask;
-        if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+        if (!options?.enable) {
             return;
         }
         let pixelData = {

package/browser/Options/Classes/CanvasMask.js

@@ -14,7 +14,6 @@ export class CanvasMask {
         this.scale = 1;
     }
     load(data) {
-        var _a, _b;
         if (!data) {
             return;
         }
@@ -33,8 +32,8 @@ export class CanvasMask {
         this.pixels.load(data.pixels);
         if (data.position) {
             this.position = {
-                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
-                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+                x: data.position.x ?? this.position.x,
+                y: data.position.y ?? this.position.y,
             };
         }
         this.override.load(data.override);

package/browser/Options/Classes/CanvasMaskPixels.js

@@ -1,3 +1,4 @@
+import { isFunction, isString } from "@tsparticles/engine";
 export class CanvasMaskPixels {
     constructor() {
         this.filter = (pixel) => pixel.a > 0;
@@ -8,10 +9,10 @@ export class CanvasMaskPixels {
             return;
         }
         if (data.filter !== undefined) {
-            if (typeof data.filter === "string") {
+            if (isString(data.filter)) {
                 if (Object.hasOwn(window, data.filter)) {
                     const filter = window[data.filter];
-                    if (typeof filter === "function") {
+                    if (isFunction(filter)) {
                         this.filter = filter;
                     }
                 }

package/browser/index.js

@@ -9,21 +9,19 @@ class CanvasMaskPlugin {
         return new CanvasMaskInstance(container, this._engine);
     }
     loadOptions(options, source) {
-        if (!this.needsPlugin(source)) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let canvasMaskOptions = options.canvasMask;
-        if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+        if (canvasMaskOptions?.load === undefined) {
             options.canvasMask = canvasMaskOptions = new CanvasMask();
         }
-        canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+        canvasMaskOptions.load(source?.canvasMask);
     }
     needsPlugin(options) {
-        var _a, _b;
-        return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+        return options?.canvasMask?.enable ?? false;
     }
 }
-export async function loadCanvasMaskPlugin(engine) {
-    const plugin = new CanvasMaskPlugin(engine);
-    await engine.addPlugin(plugin);
+export async function loadCanvasMaskPlugin(engine, refresh = true) {
+    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
 }

package/browser/utils.js

@@ -1,4 +1,4 @@
-import { getRandom } from "@tsparticles/engine";
+import { errorPrefix, getRandom, isNumber, } from "@tsparticles/engine";
 export function shuffle(array) {
     for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
         const randomIndex = Math.floor(getRandom() * currentIndex);
@@ -18,25 +18,25 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
-        if (shouldCreateParticle) {
-            const pos = {
-                x: pixelPos.x * scale + positionOffset.x,
-                y: pixelPos.y * scale + positionOffset.y,
+        if (!shouldCreateParticle) {
+            continue;
+        }
+        const pos = {
+            x: pixelPos.x * scale + positionOffset.x,
+            y: pixelPos.y * scale + positionOffset.y,
+        }, pOptions = {};
+        if (override.color) {
+            pOptions.color = {
+                value: pixel,
+            };
+        }
+        if (override.opacity) {
+            pOptions.opacity = {
+                value: pixel.a,
             };
-            const pOptions = {};
-            if (override.color) {
-                pOptions.color = {
-                    value: pixel,
-                };
-            }
-            if (override.opacity) {
-                pOptions.opacity = {
-                    value: pixel.a,
-                };
-            }
-            container.particles.addParticle(pos, pOptions);
-            selectedPixels++;
         }
+        container.particles.addParticle(pos, pOptions);
+        selectedPixels++;
     }
 }
 export function getCanvasImageData(ctx, size, offset, clear = true) {
@@ -77,7 +77,7 @@ export function getImageData(src, offset) {
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error("Could not get canvas context"));
+                return reject(new Error(`${errorPrefix} Could not get canvas context`));
             }
             context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
@@ -91,7 +91,7 @@ export function getTextData(textOptions, offset) {
     if (!text || !context) {
         return;
     }
-    const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size}px` : font.size, linesData = [];
     let maxWidth = 0, totalHeight = 0;
     for (const line of lines) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;

package/cjs/CanvasMaskInstance.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasMaskInstance = void 0;
 const utils_1 = require("./utils");
@@ -16,46 +7,44 @@ class CanvasMaskInstance {
         this._container = container;
         this._engine = engine;
     }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const container = this._container, options = container.actualOptions.canvasMask;
-            if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+    async init() {
+        const container = this._container, options = container.actualOptions.canvasMask;
+        if (!options?.enable) {
+            return;
+        }
+        let pixelData = {
+            pixels: [],
+            height: 0,
+            width: 0,
+        };
+        const offset = options.pixels.offset;
+        if (options.image) {
+            const url = options.image.src;
+            if (!url) {
                 return;
             }
-            let pixelData = {
-                pixels: [],
-                height: 0,
-                width: 0,
-            };
-            const offset = options.pixels.offset;
-            if (options.image) {
-                const url = options.image.src;
-                if (!url) {
-                    return;
-                }
-                pixelData = yield (0, utils_1.getImageData)(url, offset);
+            pixelData = await (0, utils_1.getImageData)(url, offset);
+        }
+        else if (options.text) {
+            const textOptions = options.text;
+            const data = (0, utils_1.getTextData)(textOptions, offset);
+            if (!data) {
+                return;
             }
-            else if (options.text) {
-                const textOptions = options.text;
-                const data = (0, utils_1.getTextData)(textOptions, offset);
-                if (!data) {
-                    return;
-                }
-                pixelData = data;
+            pixelData = data;
+        }
+        else if (options.element || options.selector) {
+            const canvas = options.element || (options.selector && document.querySelector(options.selector));
+            if (!canvas) {
+                return;
             }
-            else if (options.element || options.selector) {
-                const canvas = options.element || (options.selector && document.querySelector(options.selector));
-                if (!canvas) {
-                    return;
-                }
-                const context = canvas.getContext("2d");
-                if (!context) {
-                    return;
-                }
-                pixelData = (0, utils_1.getCanvasImageData)(context, canvas, offset);
+            const context = canvas.getContext("2d");
+            if (!context) {
+                return;
             }
-            (0, utils_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
-        });
+            pixelData = (0, utils_1.getCanvasImageData)(context, canvas, offset);
+        }
+        (0, utils_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
     }
 }
 exports.CanvasMaskInstance = CanvasMaskInstance;

package/cjs/Options/Classes/CanvasMask.js

@@ -17,7 +17,6 @@ class CanvasMask {
         this.scale = 1;
     }
     load(data) {
-        var _a, _b;
         if (!data) {
             return;
         }
@@ -36,8 +35,8 @@ class CanvasMask {
         this.pixels.load(data.pixels);
         if (data.position) {
             this.position = {
-                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
-                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+                x: data.position.x ?? this.position.x,
+                y: data.position.y ?? this.position.y,
             };
         }
         this.override.load(data.override);

package/cjs/Options/Classes/CanvasMaskPixels.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasMaskPixels = void 0;
+const engine_1 = require("@tsparticles/engine");
 class CanvasMaskPixels {
     constructor() {
         this.filter = (pixel) => pixel.a > 0;
@@ -11,10 +12,10 @@ class CanvasMaskPixels {
             return;
         }
         if (data.filter !== undefined) {
-            if (typeof data.filter === "string") {
+            if ((0, engine_1.isString)(data.filter)) {
                 if (Object.hasOwn(window, data.filter)) {
                     const filter = window[data.filter];
-                    if (typeof filter === "function") {
+                    if ((0, engine_1.isFunction)(filter)) {
                         this.filter = filter;
                     }
                 }

package/cjs/index.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadCanvasMaskPlugin = void 0;
 const CanvasMask_1 = require("./Options/Classes/CanvasMask");
@@ -21,24 +12,20 @@ class CanvasMaskPlugin {
         return new CanvasMaskInstance_1.CanvasMaskInstance(container, this._engine);
     }
     loadOptions(options, source) {
-        if (!this.needsPlugin(source)) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let canvasMaskOptions = options.canvasMask;
-        if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+        if (canvasMaskOptions?.load === undefined) {
             options.canvasMask = canvasMaskOptions = new CanvasMask_1.CanvasMask();
         }
-        canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+        canvasMaskOptions.load(source?.canvasMask);
     }
     needsPlugin(options) {
-        var _a, _b;
-        return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+        return options?.canvasMask?.enable ?? false;
     }
 }
-function loadCanvasMaskPlugin(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const plugin = new CanvasMaskPlugin(engine);
-        yield engine.addPlugin(plugin);
-    });
+async function loadCanvasMaskPlugin(engine, refresh = true) {
+    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
 }
 exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;

package/cjs/utils.js

@@ -22,25 +22,25 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
-        if (shouldCreateParticle) {
-            const pos = {
-                x: pixelPos.x * scale + positionOffset.x,
-                y: pixelPos.y * scale + positionOffset.y,
+        if (!shouldCreateParticle) {
+            continue;
+        }
+        const pos = {
+            x: pixelPos.x * scale + positionOffset.x,
+            y: pixelPos.y * scale + positionOffset.y,
+        }, pOptions = {};
+        if (override.color) {
+            pOptions.color = {
+                value: pixel,
+            };
+        }
+        if (override.opacity) {
+            pOptions.opacity = {
+                value: pixel.a,
             };
-            const pOptions = {};
-            if (override.color) {
-                pOptions.color = {
-                    value: pixel,
-                };
-            }
-            if (override.opacity) {
-                pOptions.opacity = {
-                    value: pixel.a,
-                };
-            }
-            container.particles.addParticle(pos, pOptions);
-            selectedPixels++;
         }
+        container.particles.addParticle(pos, pOptions);
+        selectedPixels++;
     }
 }
 exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
@@ -83,7 +83,7 @@ function getImageData(src, offset) {
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error("Could not get canvas context"));
+                return reject(new Error(`${engine_1.errorPrefix} Could not get canvas context`));
             }
             context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
@@ -98,7 +98,7 @@ function getTextData(textOptions, offset) {
     if (!text || !context) {
         return;
     }
-    const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+    const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${font.size}px` : font.size, linesData = [];
     let maxWidth = 0, totalHeight = 0;
     for (const line of lines) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;

package/esm/CanvasMaskInstance.js

@@ -6,7 +6,7 @@ export class CanvasMaskInstance {
     }
     async init() {
         const container = this._container, options = container.actualOptions.canvasMask;
-        if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+        if (!options?.enable) {
             return;
         }
         let pixelData = {

package/esm/Options/Classes/CanvasMask.js

@@ -14,7 +14,6 @@ export class CanvasMask {
         this.scale = 1;
     }
     load(data) {
-        var _a, _b;
         if (!data) {
             return;
         }
@@ -33,8 +32,8 @@ export class CanvasMask {
         this.pixels.load(data.pixels);
         if (data.position) {
             this.position = {
-                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
-                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+                x: data.position.x ?? this.position.x,
+                y: data.position.y ?? this.position.y,
             };
         }
         this.override.load(data.override);

package/esm/Options/Classes/CanvasMaskPixels.js

@@ -1,3 +1,4 @@
+import { isFunction, isString } from "@tsparticles/engine";
 export class CanvasMaskPixels {
     constructor() {
         this.filter = (pixel) => pixel.a > 0;
@@ -8,10 +9,10 @@ export class CanvasMaskPixels {
             return;
         }
         if (data.filter !== undefined) {
-            if (typeof data.filter === "string") {
+            if (isString(data.filter)) {
                 if (Object.hasOwn(window, data.filter)) {
                     const filter = window[data.filter];
-                    if (typeof filter === "function") {
+                    if (isFunction(filter)) {
                         this.filter = filter;
                     }
                 }

package/esm/index.js

@@ -9,21 +9,19 @@ class CanvasMaskPlugin {
         return new CanvasMaskInstance(container, this._engine);
     }
     loadOptions(options, source) {
-        if (!this.needsPlugin(source)) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let canvasMaskOptions = options.canvasMask;
-        if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+        if (canvasMaskOptions?.load === undefined) {
             options.canvasMask = canvasMaskOptions = new CanvasMask();
         }
-        canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+        canvasMaskOptions.load(source?.canvasMask);
     }
     needsPlugin(options) {
-        var _a, _b;
-        return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+        return options?.canvasMask?.enable ?? false;
     }
 }
-export async function loadCanvasMaskPlugin(engine) {
-    const plugin = new CanvasMaskPlugin(engine);
-    await engine.addPlugin(plugin);
+export async function loadCanvasMaskPlugin(engine, refresh = true) {
+    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
 }

package/esm/utils.js

@@ -1,4 +1,4 @@
-import { getRandom } from "@tsparticles/engine";
+import { errorPrefix, getRandom, isNumber, } from "@tsparticles/engine";
 export function shuffle(array) {
     for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
         const randomIndex = Math.floor(getRandom() * currentIndex);
@@ -18,25 +18,25 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
-        if (shouldCreateParticle) {
-            const pos = {
-                x: pixelPos.x * scale + positionOffset.x,
-                y: pixelPos.y * scale + positionOffset.y,
+        if (!shouldCreateParticle) {
+            continue;
+        }
+        const pos = {
+            x: pixelPos.x * scale + positionOffset.x,
+            y: pixelPos.y * scale + positionOffset.y,
+        }, pOptions = {};
+        if (override.color) {
+            pOptions.color = {
+                value: pixel,
+            };
+        }
+        if (override.opacity) {
+            pOptions.opacity = {
+                value: pixel.a,
             };
-            const pOptions = {};
-            if (override.color) {
-                pOptions.color = {
-                    value: pixel,
-                };
-            }
-            if (override.opacity) {
-                pOptions.opacity = {
-                    value: pixel.a,
-                };
-            }
-            container.particles.addParticle(pos, pOptions);
-            selectedPixels++;
         }
+        container.particles.addParticle(pos, pOptions);
+        selectedPixels++;
     }
 }
 export function getCanvasImageData(ctx, size, offset, clear = true) {
@@ -77,7 +77,7 @@ export function getImageData(src, offset) {
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error("Could not get canvas context"));
+                return reject(new Error(`${errorPrefix} Could not get canvas context`));
             }
             context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
@@ -91,7 +91,7 @@ export function getTextData(textOptions, offset) {
     if (!text || !context) {
         return;
     }
-    const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size}px` : font.size, linesData = [];
     let maxWidth = 0, totalHeight = 0;
     for (const line of lines) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-canvas-mask",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles canvas mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -72,10 +72,11 @@
   "unpkg": "tsparticles.plugin.canvas-mask.min.js",
   "module": "esm/index.js",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.1"
   }
-}
+}