@tsparticles/plugin-canvas-mask 3.0.3 → 3.2.0

package/262.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 262.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[262],{262:(s,i,t)=>{t.d(i,{CanvasMaskPlugin:()=>d});class e{constructor(){this.color=!0,this.opacity=!1}load(s){s&&(void 0!==s.color&&(this.color=s.color),void 0!==s.opacity&&(this.opacity=s.opacity))}}var o=t(533);class a{constructor(){this.filter=s=>s.a>0,this.offset=4}load(s){if(s){if(void 0!==s.filter)if((0,o.isString)(s.filter)){if(Object.hasOwn(window,s.filter)){const i=window[s.filter];(0,o.isFunction)(i)&&(this.filter=i)}}else this.filter=s.filter;void 0!==s.offset&&(this.offset=s.offset)}}}class n{constructor(){this.src=""}load(s){s&&void 0!==s.src&&(this.src=s.src)}}class l{constructor(){this.family="sans-serif",this.size=100}load(s){s&&(void 0!==s.family&&(this.family=s.family),void 0!==s.size&&(this.size=s.size),void 0!==s.style&&(this.style=s.style),void 0!==s.variant&&(this.variant=s.variant),void 0!==s.weight&&(this.weight=s.weight))}}class c{constructor(){this.separator="\n",this.spacing=10}load(s){s&&(void 0!==s.separator&&(this.separator=s.separator),void 0!==s.spacing&&(this.spacing=s.spacing))}}class r{constructor(){this.color="#000000",this.font=new l,this.lines=new c,this.text=""}load(s){s&&(void 0!==s.color&&(this.color=s.color),this.font.load(s.font),this.lines.load(s.lines),void 0!==s.text&&(this.text=s.text))}}class h{constructor(){this.enable=!1,this.override=new e,this.pixels=new a,this.position={x:50,y:50},this.scale=1}load(s){s&&(void 0!==s.element&&s.element instanceof HTMLCanvasElement&&(this.element=s.element),void 0!==s.enable&&(this.enable=s.enable),s.image&&(this.image||(this.image=new n),this.image.load(s.image)),this.pixels.load(s.pixels),s.position&&(this.position={x:s.position.x??this.position.x,y:s.position.y??this.position.y}),this.override.load(s.override),void 0!==s.scale&&(this.scale=s.scale),void 0!==s.selector&&(this.selector=s.selector),s.text&&(this.text||(this.text=new r),this.text.load(s.text)))}}class d{constructor(){this.id="canvasMask"}async getPlugin(s){const{CanvasMaskInstance:i}=await t.e(73).then(t.bind(t,73));return new i(s)}loadOptions(s,i){if(!this.needsPlugin(s)&&!this.needsPlugin(i))return;let t=s.canvasMask;void 0===t?.load&&(s.canvasMask=t=new h),t.load(i?.canvasMask)}needsPlugin(s){return s?.canvasMask?.enable??!1}}}}]);

package/262.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Canvas Mask Plugin v3.2.0 by Matteo Bruni */

package/73.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 73.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[73],{73:(t,e,n)=>{n.d(e,{CanvasMaskInstance:()=>r});var i=n(533);const o={x:0,y:0};async function a(t,e,n,o,a,s){const{height:r,width:h}=e,l=r*h,u=function(t){const e=1,n=0;for(let o=t.length-e;o>=n;o--){const e=Math.floor((0,i.getRandom)()*o);[t[o],t[e]]=[t[e],t[o]]}return t}(c(l)),g=Math.min(l,t.actualOptions.particles.number.value),f=t.canvas.size;let x=0;const d=f.width*n.x/i.percentDenominator-h*o*.5,m=f.height*n.y/i.percentDenominator-r*o*.5;for(;x<g&&u.length;){const n=0,i=u.pop()??n,c={x:i%h,y:Math.floor(i/h)},r=e.pixels[c.y][c.x];if(!s(r))continue;const l={x:c.x*o+d,y:c.y*o+m},g={};a.color&&(g.color={value:r}),a.opacity&&(g.opacity={value:r.a}),await t.particles.addParticle(l,g),x++}}function s(t,e,n,i=!0){const a=t.getImageData(o.x,o.y,e.width,e.height).data;i&&t.clearRect(o.x,o.y,e.width,e.height);const s=[];for(let t=0;t<a.length;t+=n){const i=t/n,o={x:i%e.width,y:Math.floor(i/e.width)};s[o.y]||(s[o.y]=[]);const c={r:0,g:1,b:2,a:3},r=255;s[o.y][o.x]={r:a[t+c.r],g:a[t+c.g],b:a[t+c.b],a:a[t+c.a]/r}}return{pixels:s,width:Math.min(...s.map((t=>t.length))),height:s.length}}const c=t=>[...Array(t).keys()];class r{constructor(t){this._container=t}async init(){const t=this._container,e=t.actualOptions.canvasMask;if(!e?.enable)return;let n={pixels:[],height:0,width:0};const c=e.pixels.offset;if(e.image){const t=e.image.src;if(!t)return;n=await function(t,e){const n=new Image;n.crossOrigin="Anonymous";const a=new Promise(((t,a)=>{n.onerror=a,n.onload=()=>{const c=document.createElement("canvas");c.width=n.width,c.height=n.height;const r=c.getContext("2d");if(!r)return a(new Error(`${i.errorPrefix} Could not get canvas context`));r.drawImage(n,o.x,o.y,n.width,n.height,o.x,o.y,c.width,c.height),t(s(r,c,e))}}));return n.src=t,a}(t,c)}else if(e.text){const t=function(t,e){const n=document.createElement("canvas"),a=n.getContext("2d"),{font:c,text:r,lines:h,color:l}=t;if(!r||!a)return;const u=r.split(h.separator),g=(0,i.isNumber)(c.size)?`${c.size}px`:c.size,f=[];let x=0,d=0;for(const t of u){a.font=`${c.style??""} ${c.variant??""} ${c.weight??""} ${g} ${c.family}`;const e=a.measureText(t),n={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};x=Math.max(x||0,n.width),d+=n.height+h.spacing,f.push(n)}n.width=x,n.height=d;let m=0;for(const t of f)a.font=`${c.style??""} ${c.variant??""} ${c.weight??""} ${g} ${c.family}`,a.fillStyle=l,a.fillText(t.text,o.x,m+t.measure.actualBoundingBoxAscent),m+=t.height+h.spacing;return s(a,n,e)}(e.text,c);if(!t)return;n=t}else if(e.element??e.selector){const t=e.element??(e.selector&&document.querySelector(e.selector));if(!t)return;const i=t.getContext("2d");if(!i)return;n=s(i,t,c)}await a(t,n,e.position,e.scale,e.override,e.pixels.filter)}}}}]);

package/73.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Canvas Mask Plugin v3.2.0 by Matteo Bruni */

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;
             }
@@ -41,6 +40,6 @@ export class CanvasMaskInstance {
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
-        addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+        await addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
     }
 }

package/browser/CanvasMaskPlugin.js

@@ -0,0 +1,23 @@
+import { CanvasMask } from "./Options/Classes/CanvasMask.js";
+export class CanvasMaskPlugin {
+    constructor() {
+        this.id = "canvasMask";
+    }
+    async getPlugin(container) {
+        const { CanvasMaskInstance } = await import("./CanvasMaskInstance.js");
+        return new CanvasMaskInstance(container);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let canvasMaskOptions = options.canvasMask;
+        if (canvasMaskOptions?.load === undefined) {
+            options.canvasMask = canvasMaskOptions = new CanvasMask();
+        }
+        canvasMaskOptions.load(source?.canvasMask);
+    }
+    needsPlugin(options) {
+        return options?.canvasMask?.enable ?? false;
+    }
+}

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,27 +1,4 @@
-import { CanvasMask } from "./Options/Classes/CanvasMask.js";
-import { CanvasMaskInstance } from "./CanvasMaskInstance.js";
-class CanvasMaskPlugin {
-    constructor(engine) {
-        this.id = "canvasMask";
-        this._engine = engine;
-    }
-    getPlugin(container) {
-        return new CanvasMaskInstance(container, this._engine);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        let canvasMaskOptions = options.canvasMask;
-        if (canvasMaskOptions?.load === undefined) {
-            options.canvasMask = canvasMaskOptions = new CanvasMask();
-        }
-        canvasMaskOptions.load(source?.canvasMask);
-    }
-    needsPlugin(options) {
-        return options?.canvasMask?.enable ?? false;
-    }
-}
 export async function loadCanvasMaskPlugin(engine, refresh = true) {
-    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+    const { CanvasMaskPlugin } = await import("./CanvasMaskPlugin.js");
+    await engine.addPlugin(new CanvasMaskPlugin(), refresh);
 }

package/browser/utils.js

@@ -1,13 +1,17 @@
-import { errorPrefix, getRandom, isNumber, } from "@tsparticles/engine";
-export function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+import { errorPrefix, getRandom, isNumber, percentDenominator, } from "@tsparticles/engine";
+const half = 0.5, origin = {
+    x: 0,
+    y: 0,
+}, defaultWidth = 0;
+export async 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);
@@ -28,14 +32,14 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
                 value: pixel.a,
             };
         }
-        container.particles.addParticle(pos, pOptions);
+        await container.particles.addParticle(pos, pOptions);
         selectedPixels++;
     }
 }
 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;
             }
@@ -44,7 +43,7 @@ class CanvasMaskInstance {
             }
             pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
         }
-        (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+        await (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
     }
 }
 exports.CanvasMaskInstance = CanvasMaskInstance;

package/cjs/CanvasMaskPlugin.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasMaskPlugin = void 0;
+const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
+class CanvasMaskPlugin {
+    constructor() {
+        this.id = "canvasMask";
+    }
+    async getPlugin(container) {
+        const { CanvasMaskInstance } = await Promise.resolve().then(() => __importStar(require("./CanvasMaskInstance.js")));
+        return new CanvasMaskInstance(container);
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+            return;
+        }
+        let canvasMaskOptions = options.canvasMask;
+        if (canvasMaskOptions?.load === undefined) {
+            options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
+        }
+        canvasMaskOptions.load(source?.canvasMask);
+    }
+    needsPlugin(options) {
+        return options?.canvasMask?.enable ?? false;
+    }
+}
+exports.CanvasMaskPlugin = CanvasMaskPlugin;

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

@@ -1,31 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadCanvasMaskPlugin = void 0;
-const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
-const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
-class CanvasMaskPlugin {
-    constructor(engine) {
-        this.id = "canvasMask";
-        this._engine = engine;
-    }
-    getPlugin(container) {
-        return new CanvasMaskInstance_js_1.CanvasMaskInstance(container, this._engine);
-    }
-    loadOptions(options, source) {
-        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-            return;
-        }
-        let canvasMaskOptions = options.canvasMask;
-        if (canvasMaskOptions?.load === undefined) {
-            options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
-        }
-        canvasMaskOptions.load(source?.canvasMask);
-    }
-    needsPlugin(options) {
-        return options?.canvasMask?.enable ?? false;
-    }
-}
 async function loadCanvasMaskPlugin(engine, refresh = true) {
-    await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+    const { CanvasMaskPlugin } = await Promise.resolve().then(() => __importStar(require("./CanvasMaskPlugin.js")));
+    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");
-function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+const half = 0.5, origin = {
+    x: 0,
+    y: 0,
+}, defaultWidth = 0;
+async 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);
@@ -31,15 +35,15 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
                 value: pixel.a,
             };
         }
-        container.particles.addParticle(pos, pOptions);
+        await container.particles.addParticle(pos, pOptions);
         selectedPixels++;
     }
 }
 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/dist_browser_CanvasMaskInstance_js.js

@@ -0,0 +1,40 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.2.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_canvas_mask"] = this["webpackChunk_tsparticles_plugin_canvas_mask"] || []).push([["dist_browser_CanvasMaskInstance_js"],{
+
+/***/ "./dist/browser/CanvasMaskInstance.js":
+/*!********************************************!*\
+  !*** ./dist/browser/CanvasMaskInstance.js ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskInstance: () => (/* binding */ CanvasMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n\nclass CanvasMaskInstance {\n  constructor(container) {\n    this._container = container;\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions.canvasMask;\n    if (!options?.enable) {\n      return;\n    }\n    let pixelData = {\n      pixels: [],\n      height: 0,\n      width: 0\n    };\n    const offset = options.pixels.offset;\n    if (options.image) {\n      const url = options.image.src;\n      if (!url) {\n        return;\n      }\n      pixelData = await (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getImageData)(url, offset);\n    } else if (options.text) {\n      const textOptions = options.text;\n      const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getTextData)(textOptions, offset);\n      if (!data) {\n        return;\n      }\n      pixelData = data;\n    } else if (options.element ?? options.selector) {\n      const canvas = options.element ?? (options.selector && document.querySelector(options.selector));\n      if (!canvas) {\n        return;\n      }\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      pixelData = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getCanvasImageData)(context, canvas, offset);\n    }\n    await (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskInstance.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/utils.js":
+/*!*******************************!*\
+  !*** ./dist/browser/utils.js ***!
+  \*******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   addParticlesFromCanvasPixels: () => (/* binding */ addParticlesFromCanvasPixels),\n/* harmony export */   getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */   getImageData: () => (/* binding */ getImageData),\n/* harmony export */   getTextData: () => (/* binding */ getTextData)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst half = 0.5,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  defaultWidth = 0;\nasync function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {\n  const {\n      height,\n      width\n    } = data,\n    numPixels = height * width,\n    indexArray = shuffle(range(numPixels)),\n    maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value),\n    canvasSize = container.canvas.size;\n  let selectedPixels = 0;\n  const positionOffset = {\n    x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - width * scale * half,\n    y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - height * scale * half\n  };\n  while (selectedPixels < maxParticles && indexArray.length) {\n    const defaultIndex = 0,\n      nextIndex = indexArray.pop() ?? defaultIndex,\n      pixelPos = {\n        x: nextIndex % width,\n        y: Math.floor(nextIndex / width)\n      },\n      pixel = data.pixels[pixelPos.y][pixelPos.x],\n      shouldCreateParticle = filter(pixel);\n    if (!shouldCreateParticle) {\n      continue;\n    }\n    const pos = {\n        x: pixelPos.x * scale + positionOffset.x,\n        y: pixelPos.y * scale + positionOffset.y\n      },\n      pOptions = {};\n    if (override.color) {\n      pOptions.color = {\n        value: pixel\n      };\n    }\n    if (override.opacity) {\n      pOptions.opacity = {\n        value: pixel.a\n      };\n    }\n    await container.particles.addParticle(pos, pOptions);\n    selectedPixels++;\n  }\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n  const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;\n  if (clear) {\n    ctx.clearRect(origin.x, origin.y, size.width, size.height);\n  }\n  const pixels = [];\n  for (let i = 0; i < imageData.length; i += offset) {\n    const idx = i / offset,\n      pos = {\n        x: idx % size.width,\n        y: Math.floor(idx / size.width)\n      };\n    if (!pixels[pos.y]) {\n      pixels[pos.y] = [];\n    }\n    const indexesOffset = {\n        r: 0,\n        g: 1,\n        b: 2,\n        a: 3\n      },\n      alphaFactor = 255;\n    pixels[pos.y][pos.x] = {\n      r: imageData[i + indexesOffset.r],\n      g: imageData[i + indexesOffset.g],\n      b: imageData[i + indexesOffset.b],\n      a: imageData[i + indexesOffset.a] / alphaFactor\n    };\n  }\n  return {\n    pixels,\n    width: Math.min(...pixels.map(row => row.length)),\n    height: pixels.length\n  };\n}\nfunction getImageData(src, offset) {\n  const image = new Image();\n  image.crossOrigin = \"Anonymous\";\n  const p = new Promise((resolve, reject) => {\n    image.onerror = reject;\n    image.onload = () => {\n      const canvas = document.createElement(\"canvas\");\n      canvas.width = image.width;\n      canvas.height = image.height;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return reject(new Error(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} Could not get canvas context`));\n      }\n      context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);\n      resolve(getCanvasImageData(context, canvas, offset));\n    };\n  });\n  image.src = src;\n  return p;\n}\nfunction getTextData(textOptions, offset) {\n  const canvas = document.createElement(\"canvas\"),\n    context = canvas.getContext(\"2d\"),\n    {\n      font,\n      text,\n      lines: linesOptions,\n      color\n    } = textOptions;\n  if (!text || !context) {\n    return;\n  }\n  const lines = text.split(linesOptions.separator),\n    fontSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(font.size) ? `${font.size}px` : font.size,\n    linesData = [];\n  let maxWidth = 0,\n    totalHeight = 0;\n  for (const line of lines) {\n    context.font = `${font.style ?? \"\"} ${font.variant ?? \"\"} ${font.weight ?? \"\"} ${fontSize} ${font.family}`;\n    const measure = context.measureText(line),\n      lineData = {\n        measure,\n        text: line,\n        height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,\n        width: measure.width\n      };\n    maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);\n    totalHeight += lineData.height + linesOptions.spacing;\n    linesData.push(lineData);\n  }\n  canvas.width = maxWidth;\n  canvas.height = totalHeight;\n  let currentHeight = 0;\n  for (const line of linesData) {\n    context.font = `${font.style ?? \"\"} ${font.variant ?? \"\"} ${font.weight ?? \"\"} ${fontSize} ${font.family}`;\n    context.fillStyle = color;\n    context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    currentHeight += line.height + linesOptions.spacing;\n  }\n  return getCanvasImageData(context, canvas, offset);\n}\nfunction shuffle(array) {\n  const lengthOffset = 1,\n    minIndex = 0;\n  for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {\n    const randomIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * currentIndex);\n    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];\n  }\n  return array;\n}\nconst range = n => [...Array(n).keys()];\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/utils.js?");
+
+/***/ })
+
+}]);