@tsparticles/plugin-canvas-mask 4.0.0-alpha.5 → 4.0.0-beta.0

package/565.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[565],{565(e,t,a){a.d(t,{CanvasMaskPluginInstance:()=>l});var i=a(425),n=a(303);class l{_container;constructor(e){this._container=e}async init(){let e=this._container,t=e.actualOptions.canvasMask;if(!t?.enable)return;let a={pixels:[],height:0,width:0},l=t.pixels.offset;if(t.image){let n=t.image.src;if(!n)return;a=await (0,i.getImageData)(n,l,e.canvas.settings)}else if(t.text){let s=t.text,r=(0,i.getTextData)(s,l,s.fill,e.canvas.settings);if((0,n.isNull)(r))return;a=r}else if(t.element??t.selector){let s=t.element??(t.selector&&(0,n.safeDocument)().querySelector(t.selector));if(!s)return;let r=s.getContext("2d",e.canvas.settings);if(!r)return;a=(0,i.getCanvasImageData)(r,s,l)}!function(e,t,a,i,l,s){let{height:r,width:c}=t,o=r*c,u=function(e){for(let t=e.length-1;t>=0;t--){let a=Math.floor((0,n.getRandom)()*t),i=e[t],l=e[a];l!==i&&void 0!==l&&void 0!==i&&(e[t]=l,e[a]=i)}return e}([...Array(o).keys()]),f=Math.min(o,e.actualOptions.particles.number.value),p=e.canvas.size,h=0,g={x:p.width*a.x/n.percentDenominator-c*i*n.half,y:p.height*a.y/n.percentDenominator-r*i*n.half};for(;h<f&&u.length;){let a=u.pop()??0,n={x:a%c,y:Math.floor(a/c)},r=t.pixels[n.y];if(!r)continue;let o=r[n.x];if(!o||!s(o))continue;let f={x:n.x*i+g.x,y:n.y*i+g.y},p={};l.color&&(p.fill={color:{value:o},enable:!0}),l.opacity&&(p.opacity={value:o.a}),e.particles.addParticle(f,p),h++}}(e,a,t.position,t.scale,t.override,t.pixels.filter)}}}}]);

package/597.min.js

@@ -0,0 +1,2 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[597],{597(i,s,t){t.d(s,{CanvasMaskPlugin:()=>d});var e=t(303);class l{color;opacity;constructor(){this.color=!0,this.opacity=!1}load(i){(0,e.isNull)(i)||(void 0!==i.color&&(this.color=i.color),void 0!==i.opacity&&(this.opacity=i.opacity))}}class o{filter;offset;constructor(){this.filter=i=>i.a>0,this.offset=4}load(i){if(!(0,e.isNull)(i)){if(void 0!==i.filter)if((0,e.isString)(i.filter)){if(i.filter in globalThis){let s=globalThis[i.filter];(0,e.isFunction)(s)&&(this.filter=s)}}else this.filter=i.filter;void 0!==i.offset&&(this.offset=i.offset)}}}class a{src;constructor(){this.src=""}load(i){(0,e.isNull)(i)||void 0!==i.src&&(this.src=i.src)}}class n{family;size;style;variant;weight;constructor(){this.family="sans-serif",this.size=100,this.style="",this.variant="",this.weight=""}load(i){(0,e.isNull)(i)||(void 0!==i.family&&(this.family=i.family),void 0!==i.size&&(this.size=i.size),void 0!==i.style&&(this.style=i.style),void 0!==i.variant&&(this.variant=i.variant),void 0!==i.weight&&(this.weight=i.weight))}}class r{separator;spacing;constructor(){this.separator=`
+`,this.spacing=10}load(i){(0,e.isNull)(i)||(void 0!==i.separator&&(this.separator=i.separator),void 0!==i.spacing&&(this.spacing=i.spacing))}}class c{color;fill;font;lines;text;constructor(){this.color="#000000",this.fill=!0,this.font=new n,this.lines=new r,this.text=""}load(i){(0,e.isNull)(i)||(void 0!==i.color&&(this.color=i.color),void 0!==i.fill&&(this.fill=i.fill),this.font.load(i.font),this.lines.load(i.lines),void 0!==i.text&&(this.text=i.text))}}class h{element;enable;image;override;pixels;position;scale;selector;text;constructor(){this.enable=!1,this.override=new l,this.pixels=new o,this.position={x:50,y:50},this.scale=1}load(i){!(0,e.isNull)(i)&&(void 0!==i.element&&i.element instanceof HTMLCanvasElement&&(this.element=i.element),void 0!==i.enable&&(this.enable=i.enable),i.image&&(this.image??=new a,this.image.load(i.image)),this.pixels.load(i.pixels),i.position&&(this.position={x:i.position.x??this.position.x,y:i.position.y??this.position.y}),this.override.load(i.override),void 0!==i.scale&&(this.scale=i.scale),void 0!==i.selector&&(this.selector=i.selector),i.text&&(this.text??=new c,this.text.load(i.text)))}}class d{id="canvas-mask";async getPlugin(i){let{CanvasMaskPluginInstance:s}=await t.e(565).then(t.bind(t,565));return new s(i)}loadOptions(i,s,t){if(!this.needsPlugin(s)&&!this.needsPlugin(t))return;let e=s.canvasMask;e?.load===void 0&&(s.canvasMask=e=new h),e.load(t?.canvasMask)}needsPlugin(i){return i?.canvasMask?.enable??!1}}}}]);

package/browser/CanvasMaskPlugin.js

@@ -1,8 +1,6 @@
 import { CanvasMask } from "./Options/Classes/CanvasMask.js";
 export class CanvasMaskPlugin {
-    constructor() {
-        this.id = "canvasMask";
-    }
+    id = "canvas-mask";
     async getPlugin(container) {
         const { CanvasMaskPluginInstance } = await import("./CanvasMaskPluginInstance.js");
         return new CanvasMaskPluginInstance(container);

package/browser/CanvasMaskPluginInstance.js

@@ -1,6 +1,8 @@
-import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
+import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
 import { isNull, safeDocument } from "@tsparticles/engine";
+import { addParticlesFromCanvasPixels } from "./utils.js";
 export class CanvasMaskPluginInstance {
+    _container;
     constructor(container) {
         this._container = container;
     }
@@ -20,23 +22,21 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, container.canvas.settings);
         }
         else if (options.text) {
-            const textOptions = options.text;
-            const data = getTextData(textOptions, offset);
+            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.settings);
             if (isNull(data)) {
                 return;
             }
             pixelData = data;
         }
         else if (options.element ?? options.selector) {
-            const canvas = options.element ??
-                (options.selector && safeDocument().querySelector(options.selector));
+            const canvas = options.element ?? (options.selector && safeDocument().querySelector(options.selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", container.canvas.settings);
             if (!context) {
                 return;
             }

package/browser/Options/Classes/CanvasMask.js

@@ -4,6 +4,15 @@ import { CanvasMaskPixels } from "./CanvasMaskPixels.js";
 import { ImageMask } from "./ImageMask.js";
 import { TextMask } from "./TextMask.js";
 export class CanvasMask {
+    element;
+    enable;
+    image;
+    override;
+    pixels;
+    position;
+    scale;
+    selector;
+    text;
     constructor() {
         this.enable = false;
         this.override = new CanvasMaskOverride();

package/browser/Options/Classes/CanvasMaskOverride.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class CanvasMaskOverride {
+    color;
+    opacity;
     constructor() {
         this.color = true;
         this.opacity = false;

package/browser/Options/Classes/CanvasMaskPixels.js

@@ -1,6 +1,8 @@
 import { isFunction, isNull, isString, } from "@tsparticles/engine";
 const minAlpha = 0;
 export class CanvasMaskPixels {
+    filter;
+    offset;
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
@@ -11,7 +13,7 @@ export class CanvasMaskPixels {
         }
         if (data.filter !== undefined) {
             if (isString(data.filter)) {
-                if (Object.hasOwn(globalThis, data.filter)) {
+                if (data.filter in globalThis) {
                     const filter = globalThis[data.filter];
                     if (isFunction(filter)) {
                         this.filter = filter;

package/browser/Options/Classes/FontTextMask.js

@@ -1,8 +1,16 @@
 import { isNull } from "@tsparticles/engine";
 export class FontTextMask {
+    family;
+    size;
+    style;
+    variant;
+    weight;
     constructor() {
         this.family = "sans-serif";
         this.size = 100;
+        this.style = "";
+        this.variant = "";
+        this.weight = "";
     }
     load(data) {
         if (isNull(data)) {

package/browser/Options/Classes/ImageMask.js

@@ -1,5 +1,6 @@
 import { isNull } from "@tsparticles/engine";
 export class ImageMask {
+    src;
     constructor() {
         this.src = "";
     }

package/browser/Options/Classes/TextMask.js

@@ -2,8 +2,14 @@ import { isNull } from "@tsparticles/engine";
 import { FontTextMask } from "./FontTextMask.js";
 import { TextMaskLine } from "./TextMaskLine.js";
 export class TextMask {
+    color;
+    fill;
+    font;
+    lines;
+    text;
     constructor() {
         this.color = "#000000";
+        this.fill = true;
         this.font = new FontTextMask();
         this.lines = new TextMaskLine();
         this.text = "";
@@ -15,6 +21,9 @@ export class TextMask {
         if (data.color !== undefined) {
             this.color = data.color;
         }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
         this.font.load(data.font);
         this.lines.load(data.lines);
         if (data.text !== undefined) {

package/browser/Options/Classes/TextMaskLine.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class TextMaskLine {
+    separator;
+    spacing;
     constructor() {
         this.separator = "\n";
         this.spacing = 10;

package/browser/index.js

@@ -1,5 +1,5 @@
 export async function loadCanvasMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
         const { CanvasMaskPlugin } = await import("./CanvasMaskPlugin.js");
         e.addPlugin(new CanvasMaskPlugin());

package/browser/utils.js

@@ -1,5 +1,4 @@
-import { defaultAlpha, getRandom, half, isNumber, originPoint, percentDenominator, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0, defaultRgb = 0;
+import { getRandom, half, percentDenominator, } from "@tsparticles/engine";
 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;
@@ -28,8 +27,11 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             y: pixelPos.y * scale + positionOffset.y,
         }, pOptions = {};
         if (override.color) {
-            pOptions.color = {
-                value: pixel,
+            pOptions.fill = {
+                color: {
+                    value: pixel,
+                },
+                enable: true,
             };
         }
         if (override.opacity) {
@@ -41,91 +43,6 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
         selectedPixels++;
     }
 }
-export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(originPoint.x, originPoint.y, size.width, size.height).data;
-    if (clear) {
-        ctx.clearRect(originPoint.x, originPoint.y, size.width, size.height);
-    }
-    const pixels = [];
-    for (let i = 0; i < imageData.length; i += offset) {
-        const idx = i / offset, pos = {
-            x: idx % size.width,
-            y: Math.floor(idx / size.width),
-        };
-        pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
-        if (!row) {
-            continue;
-        }
-        row[pos.x] = {
-            r: imageData[i + indexesOffset.r] ?? defaultRgb,
-            g: imageData[i + indexesOffset.g] ?? defaultRgb,
-            b: imageData[i + indexesOffset.b] ?? defaultRgb,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
-        };
-    }
-    return {
-        pixels,
-        width: Math.min(...pixels.map(row => row.length)),
-        height: pixels.length,
-    };
-}
-export function getImageData(src, offset) {
-    const image = new Image();
-    image.crossOrigin = "Anonymous";
-    const p = new Promise((resolve, reject) => {
-        image.onerror = reject;
-        image.onload = () => {
-            const canvas = safeDocument().createElement("canvas");
-            canvas.width = image.width;
-            canvas.height = image.height;
-            const context = canvas.getContext("2d");
-            if (!context) {
-                reject(new Error("Could not get canvas context"));
-                return;
-            }
-            context.drawImage(image, originPoint.x, originPoint.y, image.width, image.height, originPoint.x, originPoint.y, canvas.width, canvas.height);
-            resolve(getCanvasImageData(context, canvas, offset));
-        };
-    });
-    image.src = src;
-    return p;
-}
-export function getTextData(textOptions, offset) {
-    const canvas = safeDocument().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
-    if (!text || !context) {
-        return;
-    }
-    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size.toString()}px` : font.size, linesData = [];
-    let maxWidth = 0, totalHeight = 0;
-    for (const line of lines) {
-        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
-        const measure = context.measureText(line), lineData = {
-            measure,
-            text: line,
-            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
-            width: measure.width,
-        };
-        maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
-        totalHeight += lineData.height + linesOptions.spacing;
-        linesData.push(lineData);
-    }
-    canvas.width = maxWidth;
-    canvas.height = totalHeight;
-    let currentHeight = 0;
-    for (const line of linesData) {
-        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
-        context.fillStyle = color;
-        context.fillText(line.text, originPoint.x, currentHeight + line.measure.actualBoundingBoxAscent);
-        currentHeight += line.height + linesOptions.spacing;
-    }
-    return getCanvasImageData(context, canvas, offset);
-}
 function shuffle(array) {
     const lengthOffset = 1, minIndex = 0;
     for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {

package/cjs/CanvasMaskPlugin.js

@@ -1,8 +1,6 @@
 import { CanvasMask } from "./Options/Classes/CanvasMask.js";
 export class CanvasMaskPlugin {
-    constructor() {
-        this.id = "canvasMask";
-    }
+    id = "canvas-mask";
     async getPlugin(container) {
         const { CanvasMaskPluginInstance } = await import("./CanvasMaskPluginInstance.js");
         return new CanvasMaskPluginInstance(container);

package/cjs/CanvasMaskPluginInstance.js

@@ -1,6 +1,8 @@
-import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
+import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
 import { isNull, safeDocument } from "@tsparticles/engine";
+import { addParticlesFromCanvasPixels } from "./utils.js";
 export class CanvasMaskPluginInstance {
+    _container;
     constructor(container) {
         this._container = container;
     }
@@ -20,23 +22,21 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, container.canvas.settings);
         }
         else if (options.text) {
-            const textOptions = options.text;
-            const data = getTextData(textOptions, offset);
+            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.settings);
             if (isNull(data)) {
                 return;
             }
             pixelData = data;
         }
         else if (options.element ?? options.selector) {
-            const canvas = options.element ??
-                (options.selector && safeDocument().querySelector(options.selector));
+            const canvas = options.element ?? (options.selector && safeDocument().querySelector(options.selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", container.canvas.settings);
             if (!context) {
                 return;
             }

package/cjs/Options/Classes/CanvasMask.js

@@ -4,6 +4,15 @@ import { CanvasMaskPixels } from "./CanvasMaskPixels.js";
 import { ImageMask } from "./ImageMask.js";
 import { TextMask } from "./TextMask.js";
 export class CanvasMask {
+    element;
+    enable;
+    image;
+    override;
+    pixels;
+    position;
+    scale;
+    selector;
+    text;
     constructor() {
         this.enable = false;
         this.override = new CanvasMaskOverride();

package/cjs/Options/Classes/CanvasMaskOverride.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class CanvasMaskOverride {
+    color;
+    opacity;
     constructor() {
         this.color = true;
         this.opacity = false;

package/cjs/Options/Classes/CanvasMaskPixels.js

@@ -1,6 +1,8 @@
 import { isFunction, isNull, isString, } from "@tsparticles/engine";
 const minAlpha = 0;
 export class CanvasMaskPixels {
+    filter;
+    offset;
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
@@ -11,7 +13,7 @@ export class CanvasMaskPixels {
         }
         if (data.filter !== undefined) {
             if (isString(data.filter)) {
-                if (Object.hasOwn(globalThis, data.filter)) {
+                if (data.filter in globalThis) {
                     const filter = globalThis[data.filter];
                     if (isFunction(filter)) {
                         this.filter = filter;

package/cjs/Options/Classes/FontTextMask.js

@@ -1,8 +1,16 @@
 import { isNull } from "@tsparticles/engine";
 export class FontTextMask {
+    family;
+    size;
+    style;
+    variant;
+    weight;
     constructor() {
         this.family = "sans-serif";
         this.size = 100;
+        this.style = "";
+        this.variant = "";
+        this.weight = "";
     }
     load(data) {
         if (isNull(data)) {

package/cjs/Options/Classes/ImageMask.js

@@ -1,5 +1,6 @@
 import { isNull } from "@tsparticles/engine";
 export class ImageMask {
+    src;
     constructor() {
         this.src = "";
     }

package/cjs/Options/Classes/TextMask.js

@@ -2,8 +2,14 @@ import { isNull } from "@tsparticles/engine";
 import { FontTextMask } from "./FontTextMask.js";
 import { TextMaskLine } from "./TextMaskLine.js";
 export class TextMask {
+    color;
+    fill;
+    font;
+    lines;
+    text;
     constructor() {
         this.color = "#000000";
+        this.fill = true;
         this.font = new FontTextMask();
         this.lines = new TextMaskLine();
         this.text = "";
@@ -15,6 +21,9 @@ export class TextMask {
         if (data.color !== undefined) {
             this.color = data.color;
         }
+        if (data.fill !== undefined) {
+            this.fill = data.fill;
+        }
         this.font.load(data.font);
         this.lines.load(data.lines);
         if (data.text !== undefined) {

package/cjs/Options/Classes/TextMaskLine.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class TextMaskLine {
+    separator;
+    spacing;
     constructor() {
         this.separator = "\n";
         this.spacing = 10;

package/cjs/index.js

@@ -1,5 +1,5 @@
 export async function loadCanvasMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
         const { CanvasMaskPlugin } = await import("./CanvasMaskPlugin.js");
         e.addPlugin(new CanvasMaskPlugin());

package/cjs/utils.js

@@ -1,5 +1,4 @@
-import { defaultAlpha, getRandom, half, isNumber, originPoint, percentDenominator, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0, defaultRgb = 0;
+import { getRandom, half, percentDenominator, } from "@tsparticles/engine";
 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;
@@ -28,8 +27,11 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             y: pixelPos.y * scale + positionOffset.y,
         }, pOptions = {};
         if (override.color) {
-            pOptions.color = {
-                value: pixel,
+            pOptions.fill = {
+                color: {
+                    value: pixel,
+                },
+                enable: true,
             };
         }
         if (override.opacity) {
@@ -41,91 +43,6 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
         selectedPixels++;
     }
 }
-export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(originPoint.x, originPoint.y, size.width, size.height).data;
-    if (clear) {
-        ctx.clearRect(originPoint.x, originPoint.y, size.width, size.height);
-    }
-    const pixels = [];
-    for (let i = 0; i < imageData.length; i += offset) {
-        const idx = i / offset, pos = {
-            x: idx % size.width,
-            y: Math.floor(idx / size.width),
-        };
-        pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
-        if (!row) {
-            continue;
-        }
-        row[pos.x] = {
-            r: imageData[i + indexesOffset.r] ?? defaultRgb,
-            g: imageData[i + indexesOffset.g] ?? defaultRgb,
-            b: imageData[i + indexesOffset.b] ?? defaultRgb,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
-        };
-    }
-    return {
-        pixels,
-        width: Math.min(...pixels.map(row => row.length)),
-        height: pixels.length,
-    };
-}
-export function getImageData(src, offset) {
-    const image = new Image();
-    image.crossOrigin = "Anonymous";
-    const p = new Promise((resolve, reject) => {
-        image.onerror = reject;
-        image.onload = () => {
-            const canvas = safeDocument().createElement("canvas");
-            canvas.width = image.width;
-            canvas.height = image.height;
-            const context = canvas.getContext("2d");
-            if (!context) {
-                reject(new Error("Could not get canvas context"));
-                return;
-            }
-            context.drawImage(image, originPoint.x, originPoint.y, image.width, image.height, originPoint.x, originPoint.y, canvas.width, canvas.height);
-            resolve(getCanvasImageData(context, canvas, offset));
-        };
-    });
-    image.src = src;
-    return p;
-}
-export function getTextData(textOptions, offset) {
-    const canvas = safeDocument().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
-    if (!text || !context) {
-        return;
-    }
-    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size.toString()}px` : font.size, linesData = [];
-    let maxWidth = 0, totalHeight = 0;
-    for (const line of lines) {
-        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
-        const measure = context.measureText(line), lineData = {
-            measure,
-            text: line,
-            height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
-            width: measure.width,
-        };
-        maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
-        totalHeight += lineData.height + linesOptions.spacing;
-        linesData.push(lineData);
-    }
-    canvas.width = maxWidth;
-    canvas.height = totalHeight;
-    let currentHeight = 0;
-    for (const line of linesData) {
-        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
-        context.fillStyle = color;
-        context.fillText(line.text, originPoint.x, currentHeight + line.measure.actualBoundingBoxAscent);
-        currentHeight += line.height + linesOptions.spacing;
-    }
-    return getCanvasImageData(context, canvas, offset);
-}
 function shuffle(array) {
     const lengthOffset = 1, minIndex = 0;
     for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {

package/dist_browser_CanvasMaskPluginInstance_js.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
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \**************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskPluginInstance: () => (/* binding */ CanvasMaskPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\n\nclass CanvasMaskPluginInstance {\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 ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n        return;\n      }\n      pixelData = data;\n    } else if (options.element ?? options.selector) {\n      const canvas = options.element ?? (options.selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().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    (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/CanvasMaskPluginInstance.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskPluginInstance: () => (/* binding */ CanvasMaskPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n\n\n\nclass CanvasMaskPluginInstance {\n    _container;\n    constructor(container){\n        this._container = container;\n    }\n    async init() {\n        const container = this._container, 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,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_0__.getImageData)(url, offset, container.canvas.settings);\n        } else if (options.text) {\n            const textOptions = options.text, data = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_0__.getTextData)(textOptions, offset, textOptions.fill, container.canvas.settings);\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n                return;\n            }\n            pixelData = data;\n        } else if (options.element ?? options.selector) {\n            const canvas = options.element ?? (options.selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().querySelector(options.selector));\n            if (!canvas) {\n                return;\n            }\n            const context = canvas.getContext(\"2d\", container.canvas.settings);\n            if (!context) {\n                return;\n            }\n            pixelData = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_0__.getCanvasImageData)(context, canvas, offset);\n        }\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskPluginInstance.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___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\nconst defaultWidth = 0,\n  defaultRgb = 0;\nfunction 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 * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n    y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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      row = data.pixels[pixelPos.y];\n    if (!row) {\n      continue;\n    }\n    const pixel = row[pixelPos.x];\n    if (!pixel) {\n      continue;\n    }\n    const 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    container.particles.addParticle(pos, pOptions);\n    selectedPixels++;\n  }\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n  const imageData = ctx.getImageData(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, size.width, size.height).data;\n  if (clear) {\n    ctx.clearRect(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.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    pixels[pos.y] ??= [];\n    const indexesOffset = {\n        r: 0,\n        g: 1,\n        b: 2,\n        a: 3\n      },\n      alphaFactor = 255,\n      row = pixels[pos.y];\n    if (!row) {\n      continue;\n    }\n    row[pos.x] = {\n      r: imageData[i + indexesOffset.r] ?? defaultRgb,\n      g: imageData[i + indexesOffset.g] ?? defaultRgb,\n      b: imageData[i + indexesOffset.b] ?? defaultRgb,\n      a: (imageData[i + indexesOffset.a] ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultAlpha) / 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 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n      canvas.width = image.width;\n      canvas.height = image.height;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        reject(new Error(\"Could not get canvas context\"));\n        return;\n      }\n      context.drawImage(image, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, image.width, image.height, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.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 = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().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.toString()}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?.toString() ?? \"\"} ${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?.toString() ?? \"\"} ${fontSize} ${font.family}`;\n    context.fillStyle = color;\n    context.fillText(line.text, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.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      currentItem = array[currentIndex],\n      randomItem = array[randomIndex];\n    if (randomItem === currentItem) {\n      continue;\n    }\n    if (randomItem === undefined || currentItem === undefined) {\n      continue;\n    }\n    array[currentIndex] = randomItem;\n    array[randomIndex] = currentItem;\n  }\n  return array;\n}\nconst range = n => [...Array(n).keys()];\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   addParticlesFromCanvasPixels: () => (/* binding */ addParticlesFromCanvasPixels)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {\n    const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), 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 * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n        y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n    };\n    while(selectedPixels < maxParticles && indexArray.length){\n        const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {\n            x: nextIndex % width,\n            y: Math.floor(nextIndex / width)\n        }, row = data.pixels[pixelPos.y];\n        if (!row) {\n            continue;\n        }\n        const pixel = row[pixelPos.x];\n        if (!pixel) {\n            continue;\n        }\n        const 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        }, pOptions = {};\n        if (override.color) {\n            pOptions.fill = {\n                color: {\n                    value: pixel\n                },\n                enable: true\n            };\n        }\n        if (override.opacity) {\n            pOptions.opacity = {\n                value: pixel.a\n            };\n        }\n        container.particles.addParticle(pos, pOptions);\n        selectedPixels++;\n    }\n}\nfunction shuffle(array) {\n    const lengthOffset = 1, 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), currentItem = array[currentIndex], randomItem = array[randomIndex];\n        if (randomItem === currentItem) {\n            continue;\n        }\n        if (randomItem === undefined || currentItem === undefined) {\n            continue;\n        }\n        array[currentIndex] = randomItem;\n        array[randomIndex] = currentItem;\n    }\n    return array;\n}\nconst range = (n)=>[\n        ...Array(n).keys()\n    ];\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/utils.js?\n}");
 
 /***/ }