@tsparticles/plugin-canvas-mask 3.0.2 → 3.1.0

package/browser/CanvasMaskInstance.js

@@ -1,8 +1,7 @@
-import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData } from "./utils.js";
+import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
 export class CanvasMaskInstance {
-    constructor(container, engine) {
+    constructor(container) {
         this._container = container;
-        this._engine = engine;
     }
     async init() {
         const container = this._container, options = container.actualOptions.canvasMask;
@@ -30,8 +29,8 @@ export class CanvasMaskInstance {
             }
             pixelData = data;
         }
-        else if (options.element || options.selector) {
-            const canvas = options.element || (options.selector && document.querySelector(options.selector));
+        else if (options.element ?? options.selector) {
+            const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
             if (!canvas) {
                 return;
             }

package/browser/Options/Classes/CanvasMaskPixels.js

@@ -1,7 +1,8 @@
 import { isFunction, isString } from "@tsparticles/engine";
+const minAlpha = 0;
 export class CanvasMaskPixels {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
     }
     load(data) {

package/browser/index.js

@@ -1,12 +1,11 @@
 import { CanvasMask } from "./Options/Classes/CanvasMask.js";
 import { CanvasMaskInstance } from "./CanvasMaskInstance.js";
 class CanvasMaskPlugin {
-    constructor(engine) {
+    constructor() {
         this.id = "canvasMask";
-        this._engine = engine;
     }
     getPlugin(container) {
-        return new CanvasMaskInstance(container, this._engine);
+        return new CanvasMaskInstance(container);
     }
     loadOptions(options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -23,5 +22,5 @@ class CanvasMaskPlugin {
     }
 }
 export async function loadCanvasMaskPlugin(engine, refresh = true) {
-    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+    await engine.addPlugin(new CanvasMaskPlugin(), refresh);
 }

package/browser/utils.js

@@ -1,13 +1,17 @@
-import { errorPrefix, getRandom, isNumber, } from "@tsparticles/engine";
+import { errorPrefix, getRandom, isNumber, percentDenominator, } from "@tsparticles/engine";
+const half = 0.5, origin = {
+    x: 0,
+    y: 0,
+}, defaultWidth = 0;
 export function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
     const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
     let selectedPixels = 0;
     const positionOffset = {
-        x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
-        y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+        x: (canvasSize.width * position.x) / percentDenominator - width * scale * half,
+        y: (canvasSize.height * position.y) / percentDenominator - height * scale * half,
     };
     while (selectedPixels < maxParticles && indexArray.length) {
-        const nextIndex = indexArray.pop() || 0, pixelPos = {
+        const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
@@ -33,9 +37,9 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
     }
 }
 export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -46,11 +50,17 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -72,7 +82,7 @@ export function getImageData(src, offset) {
             if (!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);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -87,14 +97,14 @@ export function getTextData(textOptions, offset) {
     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}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         const measure = context.measureText(line), lineData = {
             measure,
             text: line,
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -102,15 +112,16 @@ export function getTextData(textOptions, offset) {
     canvas.height = totalHeight;
     let currentHeight = 0;
     for (const line of linesData) {
-        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         context.fillStyle = color;
-        context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         currentHeight += line.height + linesOptions.spacing;
     }
     return getCanvasImageData(context, canvas, offset);
 }
 function shuffle(array) {
-    for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+    const lengthOffset = 1, minIndex = 0;
+    for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
         const randomIndex = Math.floor(getRandom() * currentIndex);
         [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
     }

package/cjs/CanvasMaskInstance.js

@@ -3,9 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasMaskInstance = void 0;
 const utils_js_1 = require("./utils.js");
 class CanvasMaskInstance {
-    constructor(container, engine) {
+    constructor(container) {
         this._container = container;
-        this._engine = engine;
     }
     async init() {
         const container = this._container, options = container.actualOptions.canvasMask;
@@ -33,8 +32,8 @@ class CanvasMaskInstance {
             }
             pixelData = data;
         }
-        else if (options.element || options.selector) {
-            const canvas = options.element || (options.selector && document.querySelector(options.selector));
+        else if (options.element ?? options.selector) {
+            const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
             if (!canvas) {
                 return;
             }

package/cjs/Options/Classes/CanvasMaskPixels.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CanvasMaskPixels = void 0;
 const engine_1 = require("@tsparticles/engine");
+const minAlpha = 0;
 class CanvasMaskPixels {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
     }
     load(data) {

package/cjs/index.js

@@ -4,12 +4,11 @@ exports.loadCanvasMaskPlugin = void 0;
 const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
 const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
 class CanvasMaskPlugin {
-    constructor(engine) {
+    constructor() {
         this.id = "canvasMask";
-        this._engine = engine;
     }
     getPlugin(container) {
-        return new CanvasMaskInstance_js_1.CanvasMaskInstance(container, this._engine);
+        return new CanvasMaskInstance_js_1.CanvasMaskInstance(container);
     }
     loadOptions(options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -26,6 +25,6 @@ class CanvasMaskPlugin {
     }
 }
 async function loadCanvasMaskPlugin(engine, refresh = true) {
-    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+    await engine.addPlugin(new CanvasMaskPlugin(), refresh);
 }
 exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;

package/cjs/utils.js

@@ -2,15 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextData = exports.getImageData = exports.getCanvasImageData = exports.addParticlesFromCanvasPixels = void 0;
 const engine_1 = require("@tsparticles/engine");
+const half = 0.5, origin = {
+    x: 0,
+    y: 0,
+}, defaultWidth = 0;
 function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
     const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
     let selectedPixels = 0;
     const positionOffset = {
-        x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
-        y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+        x: (canvasSize.width * position.x) / engine_1.percentDenominator - width * scale * half,
+        y: (canvasSize.height * position.y) / engine_1.percentDenominator - height * scale * half,
     };
     while (selectedPixels < maxParticles && indexArray.length) {
-        const nextIndex = indexArray.pop() || 0, pixelPos = {
+        const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
@@ -37,9 +41,9 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
 }
 exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
 function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -50,11 +54,17 @@ function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -77,7 +87,7 @@ function getImageData(src, offset) {
             if (!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);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -93,14 +103,14 @@ function getTextData(textOptions, offset) {
     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}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         const measure = context.measureText(line), lineData = {
             measure,
             text: line,
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -108,16 +118,17 @@ function getTextData(textOptions, offset) {
     canvas.height = totalHeight;
     let currentHeight = 0;
     for (const line of linesData) {
-        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         context.fillStyle = color;
-        context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         currentHeight += line.height + linesOptions.spacing;
     }
     return getCanvasImageData(context, canvas, offset);
 }
 exports.getTextData = getTextData;
 function shuffle(array) {
-    for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+    const lengthOffset = 1, minIndex = 0;
+    for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
         const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex);
         [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
     }

package/esm/CanvasMaskInstance.js

@@ -1,8 +1,7 @@
-import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData } from "./utils.js";
+import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
 export class CanvasMaskInstance {
-    constructor(container, engine) {
+    constructor(container) {
         this._container = container;
-        this._engine = engine;
     }
     async init() {
         const container = this._container, options = container.actualOptions.canvasMask;
@@ -30,8 +29,8 @@ export class CanvasMaskInstance {
             }
             pixelData = data;
         }
-        else if (options.element || options.selector) {
-            const canvas = options.element || (options.selector && document.querySelector(options.selector));
+        else if (options.element ?? options.selector) {
+            const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
             if (!canvas) {
                 return;
             }

package/esm/Options/Classes/CanvasMaskPixels.js

@@ -1,7 +1,8 @@
 import { isFunction, isString } from "@tsparticles/engine";
+const minAlpha = 0;
 export class CanvasMaskPixels {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
     }
     load(data) {

package/esm/index.js

@@ -1,12 +1,11 @@
 import { CanvasMask } from "./Options/Classes/CanvasMask.js";
 import { CanvasMaskInstance } from "./CanvasMaskInstance.js";
 class CanvasMaskPlugin {
-    constructor(engine) {
+    constructor() {
         this.id = "canvasMask";
-        this._engine = engine;
     }
     getPlugin(container) {
-        return new CanvasMaskInstance(container, this._engine);
+        return new CanvasMaskInstance(container);
     }
     loadOptions(options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -23,5 +22,5 @@ class CanvasMaskPlugin {
     }
 }
 export async function loadCanvasMaskPlugin(engine, refresh = true) {
-    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+    await engine.addPlugin(new CanvasMaskPlugin(), refresh);
 }

package/esm/utils.js

@@ -1,13 +1,17 @@
-import { errorPrefix, getRandom, isNumber, } from "@tsparticles/engine";
+import { errorPrefix, getRandom, isNumber, percentDenominator, } from "@tsparticles/engine";
+const half = 0.5, origin = {
+    x: 0,
+    y: 0,
+}, defaultWidth = 0;
 export function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
     const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
     let selectedPixels = 0;
     const positionOffset = {
-        x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
-        y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+        x: (canvasSize.width * position.x) / percentDenominator - width * scale * half,
+        y: (canvasSize.height * position.y) / percentDenominator - height * scale * half,
     };
     while (selectedPixels < maxParticles && indexArray.length) {
-        const nextIndex = indexArray.pop() || 0, pixelPos = {
+        const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
         }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
@@ -33,9 +37,9 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
     }
 }
 export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -46,11 +50,17 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -72,7 +82,7 @@ export function getImageData(src, offset) {
             if (!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);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -87,14 +97,14 @@ export function getTextData(textOptions, offset) {
     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}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         const measure = context.measureText(line), lineData = {
             measure,
             text: line,
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -102,15 +112,16 @@ export function getTextData(textOptions, offset) {
     canvas.height = totalHeight;
     let currentHeight = 0;
     for (const line of linesData) {
-        context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
         context.fillStyle = color;
-        context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+        context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         currentHeight += line.height + linesOptions.spacing;
     }
     return getCanvasImageData(context, canvas, offset);
 }
 function shuffle(array) {
-    for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+    const lengthOffset = 1, minIndex = 0;
+    for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
         const randomIndex = Math.floor(getRandom() * currentIndex);
         [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-canvas-mask",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "tsParticles canvas mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,7 +86,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.2"
+    "@tsparticles/engine": "^3.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/plugin-canvas-mask [6 Dec 2023 at 17:41]</title>
+    <title>@tsparticles/plugin-canvas-mask [13 Jan 2024 at 23:02]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.plugin.canvas-mask.js","isAsset":true,"statSize":10709,"parsedSize":14543,"gzipSize":3869,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":10667,"groups":[{"id":46,"label":"index.js + 9 modules (concatenated)","path":"./dist/browser/index.js + 9 modules (concatenated)","statSize":10667,"parsedSize":14543,"gzipSize":3869,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser","statSize":10667,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/index.js","statSize":876,"parsedSize":1194,"gzipSize":317,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskInstance.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/CanvasMaskInstance.js","statSize":1360,"parsedSize":1854,"gzipSize":493,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes","statSize":3868,"groups":[{"id":null,"label":"CanvasMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMask.js","statSize":1346,"parsedSize":1835,"gzipSize":488,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskOverride.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMaskOverride.js","statSize":314,"parsedSize":428,"gzipSize":113,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskPixels.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMaskPixels.js","statSize":632,"parsedSize":861,"gzipSize":229,"inaccurateSizes":true},{"id":null,"label":"ImageMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/ImageMask.js","statSize":190,"parsedSize":259,"gzipSize":68,"inaccurateSizes":true},{"id":null,"label":"TextMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/TextMask.js","statSize":531,"parsedSize":723,"gzipSize":192,"inaccurateSizes":true},{"id":null,"label":"FontTextMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/FontTextMask.js","statSize":534,"parsedSize":728,"gzipSize":193,"inaccurateSizes":true},{"id":null,"label":"TextMaskLine.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/TextMaskLine.js","statSize":321,"parsedSize":437,"gzipSize":116,"inaccurateSizes":true}],"parsedSize":5273,"gzipSize":1402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/utils.js","statSize":4563,"parsedSize":6221,"gzipSize":1655,"inaccurateSizes":true}],"parsedSize":14543,"gzipSize":3869,"inaccurateSizes":true}]}],"parsedSize":14543,"gzipSize":3869},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.plugin.canvas-mask":true}}];
+      window.chartData = [{"label":"tsparticles.plugin.canvas-mask.js","isAsset":true,"statSize":11137,"parsedSize":14991,"gzipSize":3996,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":11095,"groups":[{"id":763,"label":"index.js + 9 modules (concatenated)","path":"./dist/browser/index.js + 9 modules (concatenated)","statSize":11095,"parsedSize":14991,"gzipSize":3996,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser","statSize":11095,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/index.js","statSize":823,"parsedSize":1111,"gzipSize":296,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskInstance.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/CanvasMaskInstance.js","statSize":1327,"parsedSize":1792,"gzipSize":477,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes","statSize":3895,"groups":[{"id":null,"label":"CanvasMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMask.js","statSize":1346,"parsedSize":1818,"gzipSize":484,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskOverride.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMaskOverride.js","statSize":314,"parsedSize":424,"gzipSize":113,"inaccurateSizes":true},{"id":null,"label":"CanvasMaskPixels.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/CanvasMaskPixels.js","statSize":659,"parsedSize":890,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"ImageMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/ImageMask.js","statSize":190,"parsedSize":256,"gzipSize":68,"inaccurateSizes":true},{"id":null,"label":"TextMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/TextMask.js","statSize":531,"parsedSize":717,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"FontTextMask.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/FontTextMask.js","statSize":534,"parsedSize":721,"gzipSize":192,"inaccurateSizes":true},{"id":null,"label":"TextMaskLine.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/Options/Classes/TextMaskLine.js","statSize":321,"parsedSize":433,"gzipSize":115,"inaccurateSizes":true}],"parsedSize":5262,"gzipSize":1402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./dist/browser/index.js + 9 modules (concatenated)/dist/browser/utils.js","statSize":5050,"parsedSize":6823,"gzipSize":1818,"inaccurateSizes":true}],"parsedSize":14991,"gzipSize":3996,"inaccurateSizes":true}]}],"parsedSize":14991,"gzipSize":3996},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.plugin.canvas-mask":true}}];
       window.entrypoints = ["tsparticles.plugin.canvas-mask","tsparticles.plugin.canvas-mask.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.plugin.canvas-mask.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -116,9 +116,10 @@ class CanvasMaskOverride {
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMaskPixels.js
 
+const minAlpha = 0;
 class CanvasMaskPixels {
   constructor() {
-    this.filter = pixel => pixel.a > 0;
+    this.filter = pixel => pixel.a > minAlpha;
     this.offset = 4;
   }
   load(data) {
@@ -281,6 +282,12 @@ class CanvasMask {
 }
 ;// CONCATENATED MODULE: ./dist/browser/utils.js
 
+const half = 0.5,
+  origin = {
+    x: 0,
+    y: 0
+  },
+  defaultWidth = 0;
 function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
   const {
       height,
@@ -292,11 +299,12 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
     canvasSize = container.canvas.size;
   let selectedPixels = 0;
   const positionOffset = {
-    x: canvasSize.width * position.x / 100 - width * scale / 2,
-    y: canvasSize.height * position.y / 100 - height * scale / 2
+    x: canvasSize.width * position.x / engine_root_window_.percentDenominator - width * scale * half,
+    y: canvasSize.height * position.y / engine_root_window_.percentDenominator - height * scale * half
   };
   while (selectedPixels < maxParticles && indexArray.length) {
-    const nextIndex = indexArray.pop() || 0,
+    const defaultIndex = 0,
+      nextIndex = indexArray.pop() ?? defaultIndex,
       pixelPos = {
         x: nextIndex % width,
         y: Math.floor(nextIndex / width)
@@ -326,9 +334,9 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
   }
 }
 function getCanvasImageData(ctx, size, offset, clear = true) {
-  const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+  const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
   if (clear) {
-    ctx.clearRect(0, 0, size.width, size.height);
+    ctx.clearRect(origin.x, origin.y, size.width, size.height);
   }
   const pixels = [];
   for (let i = 0; i < imageData.length; i += offset) {
@@ -340,11 +348,18 @@ function getCanvasImageData(ctx, size, offset, clear = true) {
     if (!pixels[pos.y]) {
       pixels[pos.y] = [];
     }
+    const indexesOffset = {
+        r: 0,
+        g: 1,
+        b: 2,
+        a: 3
+      },
+      alphaFactor = 255;
     pixels[pos.y][pos.x] = {
-      r: imageData[i],
-      g: imageData[i + 1],
-      b: imageData[i + 2],
-      a: imageData[i + 3] / 255
+      r: imageData[i + indexesOffset.r],
+      g: imageData[i + indexesOffset.g],
+      b: imageData[i + indexesOffset.b],
+      a: imageData[i + indexesOffset.a] / alphaFactor
     };
   }
   return {
@@ -366,7 +381,7 @@ function getImageData(src, offset) {
       if (!context) {
         return reject(new Error(`${engine_root_window_.errorPrefix} Could not get canvas context`));
       }
-      context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+      context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
       resolve(getCanvasImageData(context, canvas, offset));
     };
   });
@@ -391,7 +406,7 @@ function getTextData(textOptions, offset) {
   let maxWidth = 0,
     totalHeight = 0;
   for (const line of lines) {
-    context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+    context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
     const measure = context.measureText(line),
       lineData = {
         measure,
@@ -399,7 +414,7 @@ function getTextData(textOptions, offset) {
         height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
         width: measure.width
       };
-    maxWidth = Math.max(maxWidth || 0, lineData.width);
+    maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
     totalHeight += lineData.height + linesOptions.spacing;
     linesData.push(lineData);
   }
@@ -407,15 +422,17 @@ function getTextData(textOptions, offset) {
   canvas.height = totalHeight;
   let currentHeight = 0;
   for (const line of linesData) {
-    context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+    context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
     context.fillStyle = color;
-    context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+    context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
     currentHeight += line.height + linesOptions.spacing;
   }
   return getCanvasImageData(context, canvas, offset);
 }
 function shuffle(array) {
-  for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+  const lengthOffset = 1,
+    minIndex = 0;
+  for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
     const randomIndex = Math.floor((0,engine_root_window_.getRandom)() * currentIndex);
     [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
   }
@@ -425,9 +442,8 @@ const range = n => [...Array(n).keys()];
 ;// CONCATENATED MODULE: ./dist/browser/CanvasMaskInstance.js
 
 class CanvasMaskInstance {
-  constructor(container, engine) {
+  constructor(container) {
     this._container = container;
-    this._engine = engine;
   }
   async init() {
     const container = this._container,
@@ -454,8 +470,8 @@ class CanvasMaskInstance {
         return;
       }
       pixelData = data;
-    } else if (options.element || options.selector) {
-      const canvas = options.element || options.selector && document.querySelector(options.selector);
+    } else if (options.element ?? options.selector) {
+      const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
       if (!canvas) {
         return;
       }
@@ -472,12 +488,11 @@ class CanvasMaskInstance {
 
 
 class CanvasMaskPlugin {
-  constructor(engine) {
+  constructor() {
     this.id = "canvasMask";
-    this._engine = engine;
   }
   getPlugin(container) {
-    return new CanvasMaskInstance(container, this._engine);
+    return new CanvasMaskInstance(container);
   }
   loadOptions(options, source) {
     if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -494,7 +509,7 @@ class CanvasMaskPlugin {
   }
 }
 async function loadCanvasMaskPlugin(engine, refresh = true) {
-  await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+  await engine.addPlugin(new CanvasMaskPlugin(), refresh);
 }
 })();
 

package/tsparticles.plugin.canvas-mask.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.plugin.canvas-mask.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function s(t){var o=i[t];if(void 0!==o)return o.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,s),n.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{loadCanvasMaskPlugin:()=>p});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}var e=s(533);class i{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,e.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const i=window[t.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class n{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class r{constructor(){this.family="sans-serif",this.size=100}load(t){t&&(void 0!==t.family&&(this.family=t.family),void 0!==t.size&&(this.size=t.size),void 0!==t.style&&(this.style=t.style),void 0!==t.variant&&(this.variant=t.variant),void 0!==t.weight&&(this.weight=t.weight))}}class a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class l{constructor(){this.color="#000000",this.font=new r,this.lines=new a,this.text=""}load(t){t&&(void 0!==t.color&&(this.color=t.color),this.font.load(t.font),this.lines.load(t.lines),void 0!==t.text&&(this.text=t.text))}}class c{constructor(){this.enable=!1,this.override=new t,this.pixels=new i,this.position={x:50,y:50},this.scale=1}load(t){t&&(void 0!==t.element&&t.element instanceof HTMLCanvasElement&&(this.element=t.element),void 0!==t.enable&&(this.enable=t.enable),t.image&&(this.image||(this.image=new n),this.image.load(t.image)),this.pixels.load(t.pixels),t.position&&(this.position={x:t.position.x??this.position.x,y:t.position.y??this.position.y}),this.override.load(t.override),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),t.text&&(this.text||(this.text=new l),this.text.load(t.text)))}}function h(t,i,s,o,n,r){const{height:a,width:l}=i,c=a*l,h=function(t){for(let i=t.length-1;i>=0;i--){const s=Math.floor((0,e.getRandom)()*i);[t[i],t[s]]=[t[s],t[i]]}return t}(f(c)),d=Math.min(c,t.actualOptions.particles.number.value),u=t.canvas.size;let g=0;const p=u.width*s.x/100-l*o/2,x=u.height*s.y/100-a*o/2;for(;g<d&&h.length;){const e=h.pop()||0,s={x:e%l,y:Math.floor(e/l)},a=i.pixels[s.y][s.x];if(!r(a))continue;const c={x:s.x*o+p,y:s.y*o+x},d={};n.color&&(d.color={value:a}),n.opacity&&(d.opacity={value:a.a}),t.particles.addParticle(c,d),g++}}function d(t,e,i,s=!0){const o=t.getImageData(0,0,e.width,e.height).data;s&&t.clearRect(0,0,e.width,e.height);const n=[];for(let t=0;t<o.length;t+=i){const s=t/i,r={x:s%e.width,y:Math.floor(s/e.width)};n[r.y]||(n[r.y]=[]),n[r.y][r.x]={r:o[t],g:o[t+1],b:o[t+2],a:o[t+3]/255}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const f=t=>[...Array(t).keys()];class u{constructor(t,e){this._container=t,this._engine=e}async init(){const t=this._container,i=t.actualOptions.canvasMask;if(!i?.enable)return;let s={pixels:[],height:0,width:0};const o=i.pixels.offset;if(i.image){const t=i.image.src;if(!t)return;s=await function(t,i){const s=new Image;s.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{s.onerror=o,s.onload=()=>{const n=document.createElement("canvas");n.width=s.width,n.height=s.height;const r=n.getContext("2d");if(!r)return o(new Error(`${e.errorPrefix} Could not get canvas context`));r.drawImage(s,0,0,s.width,s.height,0,0,n.width,n.height),t(d(r,n,i))}}));return s.src=t,o}(t,o)}else if(i.text){const t=function(t,i){const s=document.createElement("canvas"),o=s.getContext("2d"),{font:n,text:r,lines:a,color:l}=t;if(!r||!o)return;const c=r.split(a.separator),h=(0,e.isNumber)(n.size)?`${n.size}px`:n.size,f=[];let u=0,g=0;for(const t of c){o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`;const e=o.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};u=Math.max(u||0,i.width),g+=i.height+a.spacing,f.push(i)}s.width=u,s.height=g;let p=0;for(const t of f)o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`,o.fillStyle=l,o.fillText(t.text,0,p+t.measure.actualBoundingBoxAscent),p+=t.height+a.spacing;return d(o,s,i)}(i.text,o);if(!t)return;s=t}else if(i.element||i.selector){const t=i.element||i.selector&&document.querySelector(i.selector);if(!t)return;const e=t.getContext("2d");if(!e)return;s=d(e,t,o)}h(t,s,i.position,i.scale,i.override,i.pixels.filter)}}class g{constructor(t){this.id="canvasMask",this._engine=t}getPlugin(t){return new u(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new c),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function p(t,e=!0){await t.addPlugin(new g(t),e)}})(),o})()));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var o in i)("object"==typeof exports?exports:t)[o]=i[o]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function o(t){var s=i[t];if(void 0!==s)return s.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};return(()=>{o.r(s),o.d(s,{loadCanvasMaskPlugin:()=>x});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}var e=o(533);class i{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,e.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const i=window[t.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class n{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class r{constructor(){this.family="sans-serif",this.size=100}load(t){t&&(void 0!==t.family&&(this.family=t.family),void 0!==t.size&&(this.size=t.size),void 0!==t.style&&(this.style=t.style),void 0!==t.variant&&(this.variant=t.variant),void 0!==t.weight&&(this.weight=t.weight))}}class a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class c{constructor(){this.color="#000000",this.font=new r,this.lines=new a,this.text=""}load(t){t&&(void 0!==t.color&&(this.color=t.color),this.font.load(t.font),this.lines.load(t.lines),void 0!==t.text&&(this.text=t.text))}}class l{constructor(){this.enable=!1,this.override=new t,this.pixels=new i,this.position={x:50,y:50},this.scale=1}load(t){t&&(void 0!==t.element&&t.element instanceof HTMLCanvasElement&&(this.element=t.element),void 0!==t.enable&&(this.enable=t.enable),t.image&&(this.image||(this.image=new n),this.image.load(t.image)),this.pixels.load(t.pixels),t.position&&(this.position={x:t.position.x??this.position.x,y:t.position.y??this.position.y}),this.override.load(t.override),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),t.text&&(this.text||(this.text=new c),this.text.load(t.text)))}}const h={x:0,y:0};function d(t,i,o,s,n,r){const{height:a,width:c}=i,l=a*c,h=function(t){const i=1,o=0;for(let s=t.length-i;s>=o;s--){const i=Math.floor((0,e.getRandom)()*s);[t[s],t[i]]=[t[i],t[s]]}return t}(u(l)),d=Math.min(l,t.actualOptions.particles.number.value),f=t.canvas.size;let p=0;const g=f.width*o.x/e.percentDenominator-c*s*.5,x=f.height*o.y/e.percentDenominator-a*s*.5;for(;p<d&&h.length;){const e=0,o=h.pop()??e,a={x:o%c,y:Math.floor(o/c)},l=i.pixels[a.y][a.x];if(!r(l))continue;const d={x:a.x*s+g,y:a.y*s+x},f={};n.color&&(f.color={value:l}),n.opacity&&(f.opacity={value:l.a}),t.particles.addParticle(d,f),p++}}function f(t,e,i,o=!0){const s=t.getImageData(h.x,h.y,e.width,e.height).data;o&&t.clearRect(h.x,h.y,e.width,e.height);const n=[];for(let t=0;t<s.length;t+=i){const o=t/i,r={x:o%e.width,y:Math.floor(o/e.width)};n[r.y]||(n[r.y]=[]);const a={r:0,g:1,b:2,a:3},c=255;n[r.y][r.x]={r:s[t+a.r],g:s[t+a.g],b:s[t+a.b],a:s[t+a.a]/c}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const u=t=>[...Array(t).keys()];class p{constructor(t){this._container=t}async init(){const t=this._container,i=t.actualOptions.canvasMask;if(!i?.enable)return;let o={pixels:[],height:0,width:0};const s=i.pixels.offset;if(i.image){const t=i.image.src;if(!t)return;o=await function(t,i){const o=new Image;o.crossOrigin="Anonymous";const s=new Promise(((t,s)=>{o.onerror=s,o.onload=()=>{const n=document.createElement("canvas");n.width=o.width,n.height=o.height;const r=n.getContext("2d");if(!r)return s(new Error(`${e.errorPrefix} Could not get canvas context`));r.drawImage(o,h.x,h.y,o.width,o.height,h.x,h.y,n.width,n.height),t(f(r,n,i))}}));return o.src=t,s}(t,s)}else if(i.text){const t=function(t,i){const o=document.createElement("canvas"),s=o.getContext("2d"),{font:n,text:r,lines:a,color:c}=t;if(!r||!s)return;const l=r.split(a.separator),d=(0,e.isNumber)(n.size)?`${n.size}px`:n.size,u=[];let p=0,g=0;for(const t of l){s.font=`${n.style??""} ${n.variant??""} ${n.weight??""} ${d} ${n.family}`;const e=s.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};p=Math.max(p||0,i.width),g+=i.height+a.spacing,u.push(i)}o.width=p,o.height=g;let x=0;for(const t of u)s.font=`${n.style??""} ${n.variant??""} ${n.weight??""} ${d} ${n.family}`,s.fillStyle=c,s.fillText(t.text,h.x,x+t.measure.actualBoundingBoxAscent),x+=t.height+a.spacing;return f(s,o,i)}(i.text,s);if(!t)return;o=t}else if(i.element??i.selector){const t=i.element??(i.selector&&document.querySelector(i.selector));if(!t)return;const e=t.getContext("2d");if(!e)return;o=f(e,t,s)}d(t,o,i.position,i.scale,i.override,i.pixels.filter)}}class g{constructor(){this.id="canvasMask"}getPlugin(t){return new p(t)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new l),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function x(t,e=!0){await t.addPlugin(new g,e)}})(),s})()));

package/tsparticles.plugin.canvas-mask.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Canvas Mask Plugin v3.0.2 by Matteo Bruni */
+/*! tsParticles Canvas Mask Plugin v3.1.0 by Matteo Bruni */

package/types/CanvasMaskInstance.d.ts

@@ -1,8 +1,7 @@
-import type { Engine, IContainerPlugin } from "@tsparticles/engine";
 import type { CanvasMaskContainer } from "./types.js";
+import type { IContainerPlugin } from "@tsparticles/engine";
 export declare class CanvasMaskInstance implements IContainerPlugin {
     private readonly _container;
-    private readonly _engine;
-    constructor(container: CanvasMaskContainer, engine: Engine);
+    constructor(container: CanvasMaskContainer);
     init(): Promise<void>;
 }

package/types/Options/Classes/CanvasMaskPixels.d.ts

@@ -1,4 +1,4 @@
-import type { IOptionLoader, IRgba, RecursivePartial } from "@tsparticles/engine";
+import { type IOptionLoader, type IRgba, type RecursivePartial } from "@tsparticles/engine";
 import type { ICanvasMaskPixels } from "../Interfaces/ICanvasMaskPixels.js";
 export declare class CanvasMaskPixels implements ICanvasMaskPixels, IOptionLoader<ICanvasMaskPixels> {
     filter: (pixel: IRgba) => boolean;

package/types/utils.d.ts

@@ -1,11 +1,11 @@
 import { type Container, type ICoordinates, type IDimension, type IRgba } from "@tsparticles/engine";
 import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride.js";
 import type { TextMask } from "./Options/Classes/TextMask.js";
-export type CanvasPixelData = {
+export interface CanvasPixelData {
     height: number;
     pixels: IRgba[][];
     width: number;
-};
+}
 export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): void;
 export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
 export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;

package/umd/CanvasMaskInstance.js

@@ -12,9 +12,8 @@
     exports.CanvasMaskInstance = void 0;
     const utils_js_1 = require("./utils.js");
     class CanvasMaskInstance {
-        constructor(container, engine) {
+        constructor(container) {
             this._container = container;
-            this._engine = engine;
         }
         async init() {
             const container = this._container, options = container.actualOptions.canvasMask;
@@ -42,8 +41,8 @@
                 }
                 pixelData = data;
             }
-            else if (options.element || options.selector) {
-                const canvas = options.element || (options.selector && document.querySelector(options.selector));
+            else if (options.element ?? options.selector) {
+                const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
                 if (!canvas) {
                     return;
                 }

package/umd/Options/Classes/CanvasMaskPixels.js

@@ -11,9 +11,10 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CanvasMaskPixels = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const minAlpha = 0;
     class CanvasMaskPixels {
         constructor() {
-            this.filter = (pixel) => pixel.a > 0;
+            this.filter = (pixel) => pixel.a > minAlpha;
             this.offset = 4;
         }
         load(data) {

package/umd/index.js

@@ -13,12 +13,11 @@
     const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
     const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
     class CanvasMaskPlugin {
-        constructor(engine) {
+        constructor() {
             this.id = "canvasMask";
-            this._engine = engine;
         }
         getPlugin(container) {
-            return new CanvasMaskInstance_js_1.CanvasMaskInstance(container, this._engine);
+            return new CanvasMaskInstance_js_1.CanvasMaskInstance(container);
         }
         loadOptions(options, source) {
             if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -35,7 +34,7 @@
         }
     }
     async function loadCanvasMaskPlugin(engine, refresh = true) {
-        await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+        await engine.addPlugin(new CanvasMaskPlugin(), refresh);
     }
     exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
 });

package/umd/utils.js

@@ -11,15 +11,19 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getTextData = exports.getImageData = exports.getCanvasImageData = exports.addParticlesFromCanvasPixels = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const half = 0.5, origin = {
+        x: 0,
+        y: 0,
+    }, defaultWidth = 0;
     function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
         const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
         let selectedPixels = 0;
         const positionOffset = {
-            x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
-            y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+            x: (canvasSize.width * position.x) / engine_1.percentDenominator - width * scale * half,
+            y: (canvasSize.height * position.y) / engine_1.percentDenominator - height * scale * half,
         };
         while (selectedPixels < maxParticles && indexArray.length) {
-            const nextIndex = indexArray.pop() || 0, pixelPos = {
+            const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
             }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
@@ -46,9 +50,9 @@
     }
     exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
     function getCanvasImageData(ctx, size, offset, clear = true) {
-        const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+        const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
         if (clear) {
-            ctx.clearRect(0, 0, size.width, size.height);
+            ctx.clearRect(origin.x, origin.y, size.width, size.height);
         }
         const pixels = [];
         for (let i = 0; i < imageData.length; i += offset) {
@@ -59,11 +63,17 @@
             if (!pixels[pos.y]) {
                 pixels[pos.y] = [];
             }
+            const indexesOffset = {
+                r: 0,
+                g: 1,
+                b: 2,
+                a: 3,
+            }, alphaFactor = 255;
             pixels[pos.y][pos.x] = {
-                r: imageData[i],
-                g: imageData[i + 1],
-                b: imageData[i + 2],
-                a: imageData[i + 3] / 255,
+                r: imageData[i + indexesOffset.r],
+                g: imageData[i + indexesOffset.g],
+                b: imageData[i + indexesOffset.b],
+                a: imageData[i + indexesOffset.a] / alphaFactor,
             };
         }
         return {
@@ -86,7 +96,7 @@
                 if (!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);
+                context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
                 resolve(getCanvasImageData(context, canvas, offset));
             };
         });
@@ -102,14 +112,14 @@
         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}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
             const measure = context.measureText(line), lineData = {
                 measure,
                 text: line,
                 height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
                 width: measure.width,
             };
-            maxWidth = Math.max(maxWidth || 0, lineData.width);
+            maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
             totalHeight += lineData.height + linesOptions.spacing;
             linesData.push(lineData);
         }
@@ -117,16 +127,17 @@
         canvas.height = totalHeight;
         let currentHeight = 0;
         for (const line of linesData) {
-            context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
             context.fillStyle = color;
-            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
             currentHeight += line.height + linesOptions.spacing;
         }
         return getCanvasImageData(context, canvas, offset);
     }
     exports.getTextData = getTextData;
     function shuffle(array) {
-        for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+        const lengthOffset = 1, minIndex = 0;
+        for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
             const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex);
             [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
         }