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

package/{597.min.js → 128.min.js}

@@ -1,2 +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}}}}]);
+"use strict";(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[128],{128(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(845).then(t.bind(t,845));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/845.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[845],{845(e,t,a){a.d(t,{CanvasMaskPluginInstance:()=>l});var n=a(425),i=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 i=t.image.src;if(!i)return;a=await (0,n.getImageData)(i,l,e.canvas.render.settings)}else if(t.text){let s=t.text,r=(0,n.getTextData)(s,l,s.fill,e.canvas.render.settings);if((0,i.isNull)(r))return;a=r}else if(t.element??t.selector){let s=t.element??(t.selector&&(0,i.safeDocument)().querySelector(t.selector));if(!s)return;let r=s.getContext("2d",e.canvas.render.settings);if(!r)return;a=(0,n.getCanvasImageData)(r,s,l)}!function(e,t,a,n,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,i.getRandom)()*t),n=e[t],l=e[a];l!==n&&void 0!==l&&void 0!==n&&(e[t]=l,e[a]=n)}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/i.percentDenominator-c*n*i.half,y:p.height*a.y/i.percentDenominator-r*n*i.half};for(;h<f&&u.length;){let a=u.pop()??0,i={x:a%c,y:Math.floor(a/c)},r=t.pixels[i.y];if(!r)continue;let o=r[i.x];if(!o||!s(o))continue;let f={x:i.x*n+g.x,y:i.y*n+g.y},p={};l.color&&(p.paint={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/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) plugin for particles canvas mask effect.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -72,3 +78,19 @@ import { loadCanvasMaskPlugin } from "@tsparticles/plugin-canvas-mask";
   await loadCanvasMaskPlugin(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- This package primarily extends runtime behavior or rendering and may not expose a single dedicated root options key.
+- Use the usage example in this README and combine with the nearest options section in the docs.
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadCanvasMaskPlugin(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/CanvasMaskPluginInstance.js

@@ -22,10 +22,10 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, container.canvas.settings);
+            pixelData = await getImageData(url, offset, container.canvas.render.settings);
         }
         else if (options.text) {
-            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.settings);
+            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }
@@ -36,7 +36,7 @@ export class CanvasMaskPluginInstance {
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", container.canvas.settings);
+            const context = canvas.getContext("2d", container.canvas.render.settings);
             if (!context) {
                 return;
             }

package/browser/index.js

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

package/browser/utils.js

@@ -27,11 +27,13 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             y: pixelPos.y * scale + positionOffset.y,
         }, pOptions = {};
         if (override.color) {
-            pOptions.fill = {
-                color: {
-                    value: pixel,
+            pOptions.paint = {
+                fill: {
+                    color: {
+                        value: pixel,
+                    },
+                    enable: true,
                 },
-                enable: true,
             };
         }
         if (override.opacity) {

package/cjs/CanvasMaskPluginInstance.js

@@ -22,10 +22,10 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, container.canvas.settings);
+            pixelData = await getImageData(url, offset, container.canvas.render.settings);
         }
         else if (options.text) {
-            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.settings);
+            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }
@@ -36,7 +36,7 @@ export class CanvasMaskPluginInstance {
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", container.canvas.settings);
+            const context = canvas.getContext("2d", container.canvas.render.settings);
             if (!context) {
                 return;
             }

package/cjs/index.js

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

package/cjs/utils.js

@@ -27,11 +27,13 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             y: pixelPos.y * scale + positionOffset.y,
         }, pOptions = {};
         if (override.color) {
-            pOptions.fill = {
-                color: {
-                    value: pixel,
+            pOptions.paint = {
+                fill: {
+                    color: {
+                        value: pixel,
+                    },
+                    enable: true,
                 },
-                enable: true,
             };
         }
         if (override.opacity) {

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-beta.0
+ * v4.0.0-beta.10
  */
 "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 _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}");
+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.render.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.render.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.render.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 */ });\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}");
+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.paint = {\n                fill: {\n                    color: {\n                        value: pixel\n                    },\n                    enable: true\n                }\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}");
 
 /***/ }
 

package/dist_browser_CanvasMaskPlugin_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-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*

package/esm/CanvasMaskPluginInstance.js

@@ -22,10 +22,10 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, container.canvas.settings);
+            pixelData = await getImageData(url, offset, container.canvas.render.settings);
         }
         else if (options.text) {
-            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.settings);
+            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }
@@ -36,7 +36,7 @@ export class CanvasMaskPluginInstance {
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", container.canvas.settings);
+            const context = canvas.getContext("2d", container.canvas.render.settings);
             if (!context) {
                 return;
             }

package/esm/index.js

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

package/esm/utils.js

@@ -27,11 +27,13 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
             y: pixelPos.y * scale + positionOffset.y,
         }, pOptions = {};
         if (override.color) {
-            pOptions.fill = {
-                color: {
-                    value: pixel,
+            pOptions.paint = {
+                fill: {
+                    color: {
+                        value: pixel,
+                    },
+                    enable: true,
                 },
-                enable: true,
             };
         }
         if (override.opacity) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-canvas-mask",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles canvas mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -80,14 +80,13 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/canvas-utils": "4.0.0-beta.0",
-    "@tsparticles/engine": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/canvas-utils": "4.0.0-beta.10",
+    "@tsparticles/engine": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"