@tsparticles/plugin-canvas-mask 4.0.0-alpha.8 → 4.0.0-beta.1

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-alpha.8
+ * v4.0.0-beta.1
  */
 "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 */   CanvasMaskPlugin: () => (/* binding */ CanvasMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/CanvasMask.js */ \"./dist/browser/Options/Classes/CanvasMask.js\");\n\nclass CanvasMaskPlugin {\n  constructor() {\n    this.id = \"canvasMask\";\n  }\n  async getPlugin(container) {\n    const {\n      CanvasMaskPluginInstance\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_CanvasMaskPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./CanvasMaskPluginInstance.js */ \"./dist/browser/CanvasMaskPluginInstance.js\"));\n    return new CanvasMaskPluginInstance(container);\n  }\n  loadOptions(_container, options, source) {\n    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n      return;\n    }\n    let canvasMaskOptions = options.canvasMask;\n    if (canvasMaskOptions?.load === undefined) {\n      options.canvasMask = canvasMaskOptions = new _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__.CanvasMask();\n    }\n    canvasMaskOptions.load(source?.canvasMask);\n  }\n  needsPlugin(options) {\n    return options?.canvasMask?.enable ?? false;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskPlugin: () => (/* binding */ CanvasMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/CanvasMask.js */ \"./dist/browser/Options/Classes/CanvasMask.js\");\n\nclass CanvasMaskPlugin {\n    id = \"canvas-mask\";\n    async getPlugin(container) {\n        const { CanvasMaskPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_CanvasMaskPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./CanvasMaskPluginInstance.js */ \"./dist/browser/CanvasMaskPluginInstance.js\"));\n        return new CanvasMaskPluginInstance(container);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n            return;\n        }\n        let canvasMaskOptions = options.canvasMask;\n        if (canvasMaskOptions?.load === undefined) {\n            options.canvasMask = canvasMaskOptions = new _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__.CanvasMask();\n        }\n        canvasMaskOptions.load(source?.canvasMask);\n    }\n    needsPlugin(options) {\n        return options?.canvasMask?.enable ?? false;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskPlugin.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 */   CanvasMask: () => (/* binding */ CanvasMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskOverride.js */ \"./dist/browser/Options/Classes/CanvasMaskOverride.js\");\n/* harmony import */ var _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CanvasMaskPixels.js */ \"./dist/browser/Options/Classes/CanvasMaskPixels.js\");\n/* harmony import */ var _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ImageMask.js */ \"./dist/browser/Options/Classes/ImageMask.js\");\n/* harmony import */ var _TextMask_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TextMask.js */ \"./dist/browser/Options/Classes/TextMask.js\");\n\n\n\n\n\nclass CanvasMask {\n  constructor() {\n    this.enable = false;\n    this.override = new _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskOverride();\n    this.pixels = new _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__.CanvasMaskPixels();\n    this.position = {\n      x: 50,\n      y: 50\n    };\n    this.scale = 1;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {\n      this.element = data.element;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n    if (data.image) {\n      this.image ??= new _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__.ImageMask();\n      this.image.load(data.image);\n    }\n    this.pixels.load(data.pixels);\n    if (data.position) {\n      this.position = {\n        x: data.position.x ?? this.position.x,\n        y: data.position.y ?? this.position.y\n      };\n    }\n    this.override.load(data.override);\n    if (data.scale !== undefined) {\n      this.scale = data.scale;\n    }\n    if (data.selector !== undefined) {\n      this.selector = data.selector;\n    }\n    if (data.text) {\n      this.text ??= new _TextMask_js__WEBPACK_IMPORTED_MODULE_4__.TextMask();\n      this.text.load(data.text);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMask: () => (/* binding */ CanvasMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskOverride.js */ \"./dist/browser/Options/Classes/CanvasMaskOverride.js\");\n/* harmony import */ var _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CanvasMaskPixels.js */ \"./dist/browser/Options/Classes/CanvasMaskPixels.js\");\n/* harmony import */ var _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ImageMask.js */ \"./dist/browser/Options/Classes/ImageMask.js\");\n/* harmony import */ var _TextMask_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TextMask.js */ \"./dist/browser/Options/Classes/TextMask.js\");\n\n\n\n\n\nclass CanvasMask {\n    element;\n    enable;\n    image;\n    override;\n    pixels;\n    position;\n    scale;\n    selector;\n    text;\n    constructor(){\n        this.enable = false;\n        this.override = new _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskOverride();\n        this.pixels = new _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__.CanvasMaskPixels();\n        this.position = {\n            x: 50,\n            y: 50\n        };\n        this.scale = 1;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {\n            this.element = data.element;\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        }\n        if (data.image) {\n            this.image ??= new _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__.ImageMask();\n            this.image.load(data.image);\n        }\n        this.pixels.load(data.pixels);\n        if (data.position) {\n            this.position = {\n                x: data.position.x ?? this.position.x,\n                y: data.position.y ?? this.position.y\n            };\n        }\n        this.override.load(data.override);\n        if (data.scale !== undefined) {\n            this.scale = data.scale;\n        }\n        if (data.selector !== undefined) {\n            this.selector = data.selector;\n        }\n        if (data.text) {\n            this.text ??= new _TextMask_js__WEBPACK_IMPORTED_MODULE_4__.TextMask();\n            this.text.load(data.text);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMask.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,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 */   CanvasMaskOverride: () => (/* binding */ CanvasMaskOverride)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass CanvasMaskOverride {\n  constructor() {\n    this.color = true;\n    this.opacity = false;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    if (data.opacity !== undefined) {\n      this.opacity = data.opacity;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskOverride.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskOverride: () => (/* binding */ CanvasMaskOverride)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass CanvasMaskOverride {\n    color;\n    opacity;\n    constructor(){\n        this.color = true;\n        this.opacity = false;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.color !== undefined) {\n            this.color = data.color;\n        }\n        if (data.opacity !== undefined) {\n            this.opacity = data.opacity;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskOverride.js?\n}");
 
 /***/ },
 
@@ -53,7 +53,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 */   CanvasMaskPixels: () => (/* binding */ CanvasMaskPixels)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minAlpha = 0;\nclass CanvasMaskPixels {\n  constructor() {\n    this.filter = pixel => pixel.a > minAlpha;\n    this.offset = 4;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.filter !== undefined) {\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.filter)) {\n        if (Object.hasOwn(globalThis, data.filter)) {\n          const filter = globalThis[data.filter];\n          if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(filter)) {\n            this.filter = filter;\n          }\n        }\n      } else {\n        this.filter = data.filter;\n      }\n    }\n    if (data.offset !== undefined) {\n      this.offset = data.offset;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskPixels.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasMaskPixels: () => (/* binding */ CanvasMaskPixels)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minAlpha = 0;\nclass CanvasMaskPixels {\n    filter;\n    offset;\n    constructor(){\n        this.filter = (pixel)=>pixel.a > minAlpha;\n        this.offset = 4;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.filter !== undefined) {\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.filter)) {\n                if (data.filter in globalThis) {\n                    const filter = globalThis[data.filter];\n                    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(filter)) {\n                        this.filter = filter;\n                    }\n                }\n            } else {\n                this.filter = data.filter;\n            }\n        }\n        if (data.offset !== undefined) {\n            this.offset = data.offset;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskPixels.js?\n}");
 
 /***/ },
 
@@ -63,7 +63,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 */   FontTextMask: () => (/* binding */ FontTextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass FontTextMask {\n  constructor() {\n    this.family = \"sans-serif\";\n    this.size = 100;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.family !== undefined) {\n      this.family = data.family;\n    }\n    if (data.size !== undefined) {\n      this.size = data.size;\n    }\n    if (data.style !== undefined) {\n      this.style = data.style;\n    }\n    if (data.variant !== undefined) {\n      this.variant = data.variant;\n    }\n    if (data.weight !== undefined) {\n      this.weight = data.weight;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/FontTextMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   FontTextMask: () => (/* binding */ FontTextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass FontTextMask {\n    family;\n    size;\n    style;\n    variant;\n    weight;\n    constructor(){\n        this.family = \"sans-serif\";\n        this.size = 100;\n        this.style = \"\";\n        this.variant = \"\";\n        this.weight = \"\";\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.family !== undefined) {\n            this.family = data.family;\n        }\n        if (data.size !== undefined) {\n            this.size = data.size;\n        }\n        if (data.style !== undefined) {\n            this.style = data.style;\n        }\n        if (data.variant !== undefined) {\n            this.variant = data.variant;\n        }\n        if (data.weight !== undefined) {\n            this.weight = data.weight;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/FontTextMask.js?\n}");
 
 /***/ },
 
@@ -73,7 +73,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 */   ImageMask: () => (/* binding */ ImageMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ImageMask {\n  constructor() {\n    this.src = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.src !== undefined) {\n      this.src = data.src;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/ImageMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ImageMask: () => (/* binding */ ImageMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ImageMask {\n    src;\n    constructor(){\n        this.src = \"\";\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.src !== undefined) {\n            this.src = data.src;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/ImageMask.js?\n}");
 
 /***/ },
 
@@ -83,7 +83,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 */   TextMask: () => (/* binding */ TextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FontTextMask.js */ \"./dist/browser/Options/Classes/FontTextMask.js\");\n/* harmony import */ var _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextMaskLine.js */ \"./dist/browser/Options/Classes/TextMaskLine.js\");\n\n\n\nclass TextMask {\n  constructor() {\n    this.color = \"#000000\";\n    this.font = new _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__.FontTextMask();\n    this.lines = new _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__.TextMaskLine();\n    this.text = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    this.font.load(data.font);\n    this.lines.load(data.lines);\n    if (data.text !== undefined) {\n      this.text = data.text;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextMask: () => (/* binding */ TextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FontTextMask.js */ \"./dist/browser/Options/Classes/FontTextMask.js\");\n/* harmony import */ var _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextMaskLine.js */ \"./dist/browser/Options/Classes/TextMaskLine.js\");\n\n\n\nclass TextMask {\n    color;\n    fill;\n    font;\n    lines;\n    text;\n    constructor(){\n        this.color = \"#000000\";\n        this.fill = true;\n        this.font = new _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__.FontTextMask();\n        this.lines = new _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__.TextMaskLine();\n        this.text = \"\";\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.color !== undefined) {\n            this.color = data.color;\n        }\n        if (data.fill !== undefined) {\n            this.fill = data.fill;\n        }\n        this.font.load(data.font);\n        this.lines.load(data.lines);\n        if (data.text !== undefined) {\n            this.text = data.text;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMask.js?\n}");
 
 /***/ },
 
@@ -93,7 +93,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 */   TextMaskLine: () => (/* binding */ TextMaskLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextMaskLine {\n  constructor() {\n    this.separator = \"\\n\";\n    this.spacing = 10;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.separator !== undefined) {\n      this.separator = data.separator;\n    }\n    if (data.spacing !== undefined) {\n      this.spacing = data.spacing;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMaskLine.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextMaskLine: () => (/* binding */ TextMaskLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextMaskLine {\n    separator;\n    spacing;\n    constructor(){\n        this.separator = \"\\n\";\n        this.spacing = 10;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.separator !== undefined) {\n            this.separator = data.separator;\n        }\n        if (data.spacing !== undefined) {\n            this.spacing = data.spacing;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMaskLine.js?\n}");
 
 /***/ }
 

package/esm/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/esm/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,11 +22,10 @@ export class CanvasMaskPluginInstance {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, container.canvas.render.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.render.settings);
             if (isNull(data)) {
                 return;
             }
@@ -35,7 +36,7 @@ export class CanvasMaskPluginInstance {
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", container.canvas.render.settings);
             if (!context) {
                 return;
             }

package/esm/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/esm/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/esm/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/esm/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/esm/Options/Classes/ImageMask.js

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

package/esm/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/esm/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/esm/index.js

@@ -1,7 +1,7 @@
 export async function loadCanvasMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.1");
+    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

@@ -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/package.json

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