@tsparticles/plugin-canvas-mask 3.0.0-alpha.0

package/tsparticles.plugin.canvas-mask.js

@@ -0,0 +1,505 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.0.0-alpha.0
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@tsparticles/engine"));
+	else if(typeof define === 'function' && define.amd)
+		define(["@tsparticles/engine"], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(this, (__WEBPACK_EXTERNAL_MODULE__533__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 533:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__533__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "loadCanvasMaskPlugin": () => (/* binding */ loadCanvasMaskPlugin)
+});
+
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMaskOverride.js
+class CanvasMaskOverride {
+  constructor() {
+    this.color = true;
+    this.opacity = false;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.color !== undefined) {
+      this.color = data.color;
+    }
+    if (data.opacity !== undefined) {
+      this.opacity = data.opacity;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMaskPixels.js
+class CanvasMaskPixels {
+  constructor() {
+    this.filter = pixel => pixel.a > 0;
+    this.offset = 4;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.filter !== undefined) {
+      if (typeof data.filter === "string") {
+        if (Object.hasOwn(window, data.filter)) {
+          const filter = window[data.filter];
+          if (typeof filter === "function") {
+            this.filter = filter;
+          }
+        }
+      } else {
+        this.filter = data.filter;
+      }
+    }
+    if (data.offset !== undefined) {
+      this.offset = data.offset;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/ImageMask.js
+class ImageMask {
+  constructor() {
+    this.src = "";
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.src !== undefined) {
+      this.src = data.src;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/FontTextMask.js
+class FontTextMask {
+  constructor() {
+    this.family = "sans-serif";
+    this.size = 100;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.family !== undefined) {
+      this.family = data.family;
+    }
+    if (data.size !== undefined) {
+      this.size = data.size;
+    }
+    if (data.style !== undefined) {
+      this.style = data.style;
+    }
+    if (data.variant !== undefined) {
+      this.variant = data.variant;
+    }
+    if (data.weight !== undefined) {
+      this.weight = data.weight;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/TextMaskLine.js
+class TextMaskLine {
+  constructor() {
+    this.separator = "\n";
+    this.spacing = 10;
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.separator !== undefined) {
+      this.separator = data.separator;
+    }
+    if (data.spacing !== undefined) {
+      this.spacing = data.spacing;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/TextMask.js
+
+
+class TextMask {
+  constructor() {
+    this.color = "#000000";
+    this.font = new FontTextMask();
+    this.lines = new TextMaskLine();
+    this.text = "";
+  }
+  load(data) {
+    if (!data) {
+      return;
+    }
+    if (data.color !== undefined) {
+      this.color = data.color;
+    }
+    this.font.load(data.font);
+    this.lines.load(data.lines);
+    if (data.text !== undefined) {
+      this.text = data.text;
+    }
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMask.js
+
+
+
+
+class CanvasMask {
+  constructor() {
+    this.enable = false;
+    this.override = new CanvasMaskOverride();
+    this.pixels = new CanvasMaskPixels();
+    this.position = {
+      x: 50,
+      y: 50
+    };
+    this.scale = 1;
+  }
+  load(data) {
+    var _a, _b;
+    if (!data) {
+      return;
+    }
+    if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {
+      this.element = data.element;
+    }
+    if (data.enable !== undefined) {
+      this.enable = data.enable;
+    }
+    if (data.image) {
+      if (!this.image) {
+        this.image = new ImageMask();
+      }
+      this.image.load(data.image);
+    }
+    this.pixels.load(data.pixels);
+    if (data.position) {
+      this.position = {
+        x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
+        y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y
+      };
+    }
+    this.override.load(data.override);
+    if (data.scale !== undefined) {
+      this.scale = data.scale;
+    }
+    if (data.selector !== undefined) {
+      this.selector = data.selector;
+    }
+    if (data.text) {
+      if (!this.text) {
+        this.text = new TextMask();
+      }
+      this.text.load(data.text);
+    }
+  }
+}
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
+;// CONCATENATED MODULE: ./dist/browser/utils.js
+
+function shuffle(array) {
+  for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+    const randomIndex = Math.floor((0,engine_root_window_.getRandom)() * currentIndex);
+    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+  }
+  return array;
+}
+function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+  const {
+      height,
+      width
+    } = data,
+    numPixels = height * width,
+    indexArray = shuffle(range(numPixels)),
+    maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value),
+    canvasSize = container.canvas.size;
+  let selectedPixels = 0;
+  const positionOffset = {
+    x: canvasSize.width * position.x / 100 - width * scale / 2,
+    y: canvasSize.height * position.y / 100 - height * scale / 2
+  };
+  while (selectedPixels < maxParticles && indexArray.length) {
+    const nextIndex = indexArray.pop() || 0,
+      pixelPos = {
+        x: nextIndex % width,
+        y: Math.floor(nextIndex / width)
+      },
+      pixel = data.pixels[pixelPos.y][pixelPos.x],
+      shouldCreateParticle = filter(pixel);
+    if (shouldCreateParticle) {
+      const pos = {
+        x: pixelPos.x * scale + positionOffset.x,
+        y: pixelPos.y * scale + positionOffset.y
+      };
+      const pOptions = {};
+      if (override.color) {
+        pOptions.color = {
+          value: pixel
+        };
+      }
+      if (override.opacity) {
+        pOptions.opacity = {
+          value: pixel.a
+        };
+      }
+      container.particles.addParticle(pos, pOptions);
+      selectedPixels++;
+    }
+  }
+}
+function getCanvasImageData(ctx, size, offset, clear = true) {
+  const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+  if (clear) {
+    ctx.clearRect(0, 0, 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)
+      };
+    if (!pixels[pos.y]) {
+      pixels[pos.y] = [];
+    }
+    pixels[pos.y][pos.x] = {
+      r: imageData[i],
+      g: imageData[i + 1],
+      b: imageData[i + 2],
+      a: imageData[i + 3] / 255
+    };
+  }
+  return {
+    pixels,
+    width: Math.min(...pixels.map(row => row.length)),
+    height: pixels.length
+  };
+}
+function getImageData(src, offset) {
+  const image = new Image();
+  image.crossOrigin = "Anonymous";
+  const p = new Promise((resolve, reject) => {
+    image.onerror = reject;
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = image.width;
+      canvas.height = image.height;
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return reject(new Error("Could not get canvas context"));
+      }
+      context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+      resolve(getCanvasImageData(context, canvas, offset));
+    };
+  });
+  image.src = src;
+  return p;
+}
+function getTextData(textOptions, offset) {
+  const canvas = document.createElement("canvas"),
+    context = canvas.getContext("2d"),
+    {
+      font,
+      text,
+      lines: linesOptions,
+      color
+    } = textOptions;
+  if (!text || !context) {
+    return;
+  }
+  const lines = text.split(linesOptions.separator),
+    fontSize = typeof font.size === "number" ? `${font.size}px` : font.size,
+    linesData = [];
+  let maxWidth = 0,
+    totalHeight = 0;
+  for (const line of lines) {
+    context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+    const measure = context.measureText(line),
+      lineData = {
+        measure,
+        text: line,
+        height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+        width: measure.width
+      };
+    maxWidth = Math.max(maxWidth || 0, 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 || ""} ${fontSize} ${font.family}`;
+    context.fillStyle = color;
+    context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+    currentHeight += line.height + linesOptions.spacing;
+  }
+  return getCanvasImageData(context, canvas, offset);
+}
+const range = n => [...Array(n).keys()];
+;// CONCATENATED MODULE: ./dist/browser/CanvasMaskInstance.js
+
+class CanvasMaskInstance {
+  constructor(container, engine) {
+    this._container = container;
+    this._engine = engine;
+  }
+  async init() {
+    const container = this._container,
+      options = container.actualOptions.canvasMask;
+    if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+      return;
+    }
+    let pixelData = {
+      pixels: [],
+      height: 0,
+      width: 0
+    };
+    const offset = options.pixels.offset;
+    if (options.image) {
+      const url = options.image.src;
+      if (!url) {
+        return;
+      }
+      pixelData = await getImageData(url, offset);
+    } else if (options.text) {
+      const textOptions = options.text;
+      const data = getTextData(textOptions, offset);
+      if (!data) {
+        return;
+      }
+      pixelData = data;
+    } else if (options.element || options.selector) {
+      const canvas = options.element || options.selector && document.querySelector(options.selector);
+      if (!canvas) {
+        return;
+      }
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return;
+      }
+      pixelData = getCanvasImageData(context, canvas, offset);
+    }
+    addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+
+class CanvasMaskPlugin {
+  constructor(engine) {
+    this.id = "canvasMask";
+    this._engine = engine;
+  }
+  getPlugin(container) {
+    return new CanvasMaskInstance(container, this._engine);
+  }
+  loadOptions(options, source) {
+    if (!this.needsPlugin(source)) {
+      return;
+    }
+    let canvasMaskOptions = options.canvasMask;
+    if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+      options.canvasMask = canvasMaskOptions = new CanvasMask();
+    }
+    canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+  }
+  needsPlugin(options) {
+    var _a, _b;
+    return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+  }
+}
+async function loadCanvasMaskPlugin(engine) {
+  const plugin = new CanvasMaskPlugin(engine);
+  await engine.addPlugin(plugin);
+}
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

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

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

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

@@ -0,0 +1,8 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.0.0-alpha.0
+ */

package/types/CanvasMaskInstance.d.ts

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

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

@@ -0,0 +1,19 @@
+import type { ICoordinates, IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { CanvasMaskOverride } from "./CanvasMaskOverride";
+import { CanvasMaskPixels } from "./CanvasMaskPixels";
+import type { ICanvasMask } from "../Interfaces/ICanvasMask";
+import { ImageMask } from "./ImageMask";
+import { TextMask } from "./TextMask";
+export declare class CanvasMask implements ICanvasMask, IOptionLoader<ICanvasMask> {
+    element?: HTMLCanvasElement;
+    enable: boolean;
+    image?: ImageMask;
+    override: CanvasMaskOverride;
+    pixels: CanvasMaskPixels;
+    position: ICoordinates;
+    scale: number;
+    selector?: string;
+    text?: TextMask;
+    constructor();
+    load(data?: RecursivePartial<ICanvasMask>): void;
+}

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

@@ -0,0 +1,8 @@
+import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import type { ICanvasMaskOverride } from "../Interfaces/ICanvasMaskOverride";
+export declare class CanvasMaskOverride implements ICanvasMaskOverride, IOptionLoader<ICanvasMaskOverride> {
+    color: boolean;
+    opacity: boolean;
+    constructor();
+    load(data?: RecursivePartial<ICanvasMaskOverride>): void;
+}

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

@@ -0,0 +1,8 @@
+import type { IOptionLoader, IRgba, RecursivePartial } from "@tsparticles/engine";
+import type { ICanvasMaskPixels } from "../Interfaces/ICanvasMaskPixels";
+export declare class CanvasMaskPixels implements ICanvasMaskPixels, IOptionLoader<ICanvasMaskPixels> {
+    filter: (pixel: IRgba) => boolean;
+    offset: number;
+    constructor();
+    load(data?: RecursivePartial<ICanvasMaskPixels> | undefined): void;
+}

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

@@ -0,0 +1,11 @@
+import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import type { IFontTextMask } from "../Interfaces/IFontTextMask";
+export declare class FontTextMask implements IFontTextMask, IOptionLoader<IFontTextMask> {
+    family: string;
+    size: string | number;
+    style?: string;
+    variant?: string;
+    weight?: string | number;
+    constructor();
+    load(data?: RecursivePartial<IFontTextMask> | undefined): void;
+}

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

@@ -0,0 +1,7 @@
+import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import type { IImageMask } from "../Interfaces/IImageMask";
+export declare class ImageMask implements IImageMask, IOptionLoader<IImageMask> {
+    src: string;
+    constructor();
+    load(data?: RecursivePartial<IImageMask>): void;
+}

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

@@ -0,0 +1,12 @@
+import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { FontTextMask } from "./FontTextMask";
+import type { ITextMask } from "../Interfaces/ITextMask";
+import { TextMaskLine } from "./TextMaskLine";
+export declare class TextMask implements ITextMask, IOptionLoader<ITextMask> {
+    color: string;
+    font: FontTextMask;
+    lines: TextMaskLine;
+    text: string;
+    constructor();
+    load(data?: RecursivePartial<ITextMask>): void;
+}

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

@@ -0,0 +1,8 @@
+import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import type { ITextMaskLine } from "../Interfaces/ITextMaskLine";
+export declare class TextMaskLine implements ITextMaskLine, IOptionLoader<ITextMaskLine> {
+    separator: string;
+    spacing: number;
+    constructor();
+    load(data?: RecursivePartial<ITextMaskLine> | undefined): void;
+}

package/types/Options/Interfaces/ICanvasMask.d.ts

@@ -0,0 +1,16 @@
+import type { ICanvasMaskOverride } from "./ICanvasMaskOverride";
+import type { ICanvasMaskPixels } from "./ICanvasMaskPixels";
+import type { ICoordinates } from "@tsparticles/engine";
+import type { IImageMask } from "./IImageMask";
+import type { ITextMask } from "./ITextMask";
+export interface ICanvasMask {
+    element?: HTMLCanvasElement;
+    enable: boolean;
+    image?: IImageMask;
+    override: ICanvasMaskOverride;
+    pixels: ICanvasMaskPixels;
+    position: ICoordinates;
+    scale: number;
+    selector?: string;
+    text?: ITextMask;
+}

package/types/Options/Interfaces/ICanvasMaskOverride.d.ts

@@ -0,0 +1,4 @@
+export interface ICanvasMaskOverride {
+    color: boolean;
+    opacity: boolean;
+}

package/types/Options/Interfaces/ICanvasMaskPixels.d.ts

@@ -0,0 +1,5 @@
+import type { IRgba } from "@tsparticles/engine";
+export interface ICanvasMaskPixels {
+    filter: string | ((pixel: IRgba) => boolean);
+    offset: number;
+}

package/types/Options/Interfaces/IFontTextMask.d.ts

@@ -0,0 +1,7 @@
+export interface IFontTextMask {
+    family: string;
+    size: number | string;
+    style?: string;
+    variant?: string;
+    weight?: number | string;
+}

package/types/Options/Interfaces/IImageMask.d.ts

@@ -0,0 +1,3 @@
+export interface IImageMask {
+    src: string;
+}

package/types/Options/Interfaces/ITextMask.d.ts

@@ -0,0 +1,8 @@
+import type { IFontTextMask } from "./IFontTextMask";
+import type { ITextMaskLine } from "./ITextMaskLine";
+export interface ITextMask {
+    color: string;
+    font: IFontTextMask;
+    lines: ITextMaskLine;
+    text: string;
+}

package/types/Options/Interfaces/ITextMaskLine.d.ts

@@ -0,0 +1,4 @@
+export interface ITextMaskLine {
+    separator: string;
+    spacing: number;
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "@tsparticles/engine";
+export declare function loadCanvasMaskPlugin(engine: Engine): Promise<void>;