@tsparticles/plugin-emitters-shape-canvas 4.0.0-alpha.8 → 4.0.0-beta.0

package/373.min.js

@@ -0,0 +1,2 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_emitters_shape_canvas=this.webpackChunk_tsparticles_plugin_emitters_shape_canvas||[]).push([[373],{373(t,e,i){i.d(e,{EmittersCanvasShapeGenerator:()=>p});var s=i(303),a=i(526),l=i(425);class o extends a.EmitterShapeBase{filter;pixelData;scale;_container;constructor(t,e,i,a,l){super(e,i,a,l),this._container=t;const o=l.filter;let r=t=>t.a>0;if((0,s.isString)(o)){if(o in globalThis){const t=globalThis[o];(0,s.isFunction)(t)&&(r=t)}}else r=o;this.filter=r,this.scale=l.scale,this.pixelData={pixels:[],height:0,width:0}}async init(){let t,e=this.options,i=e.selector,a=e.pixels,o=e.image,r=e.element,n=e.text,h=a.offset;if(o){let e=o.src;if(!e)return;t=await (0,l.getImageData)(e,h,this._container.canvas.settings)}else if(r??i){let e=r??(i&&(0,s.safeDocument)().querySelector(i));if(!e)return;let a=e.getContext("2d",this._container.canvas.settings);if(!a)return;t=(0,l.getCanvasImageData)(a,e,h)}else{let e=(0,l.getTextData)(n,h,this.fill,this._container.canvas.settings);if((0,s.isNull)(e))return;t=e}this.pixelData=t}randomPosition(){let{height:t,width:e}=this.pixelData,i=this.pixelData,a=this.position,l=this.scale,o={x:a.x-e*l*s.half,y:a.y-t*l*s.half};for(let a=0;a<100;a++){let a=Math.floor((0,s.getRandom)()*e*t),r={x:a%e,y:Math.floor(a/e)},n=i.pixels[r.y];if(!n)continue;let h=n[r.x];if(h&&this.filter(h))return{position:{x:r.x*l+o.x,y:r.y*l+o.y},color:{...h},opacity:h.a}}return null}resize(t,e){super.resize(t,e)}}class r{offset;constructor(){this.offset=4}load(t){(0,s.isNull)(t)||void 0!==t.offset&&(this.offset=t.offset)}}class n{family;size;style;variant;weight;constructor(){this.family="Verdana",this.size=32,this.style="",this.variant="",this.weight=""}load(t){(0,s.isNull)(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 h{separator;spacing;constructor(){this.separator=`
+`,this.spacing=0}load(t){(0,s.isNull)(t)||(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class c{color;font;lines;text;constructor(){this.color="#000000",this.font=new n,this.lines=new h,this.text=""}load(t){(0,s.isNull)(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 f{element;filter;image;pixels;scale;selector;text;constructor(){this.filter=t=>t.a>0,this.pixels=new r,this.scale=1,this.selector="",this.text=new c}load(t){(0,s.isNull)(t)||(void 0!==t.element&&(this.element=t.element),void 0!==t.filter&&(this.filter=t.filter),this.pixels.load(t.pixels),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),void 0!==t.image&&(this.image=t.image),this.text.load(t.text))}}class p{generate(t,e,i,s,a){let l=new f;return l.load(a),new o(t,e,i,s,l)}}}}]);

package/browser/EmittersCanvasShape.js

@@ -1,14 +1,19 @@
-import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
 import { getRandom, half, isFunction, isNull, isString, safeDocument, } from "@tsparticles/engine";
-import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
+import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
 const maxRetries = 100;
 export class EmittersCanvasShape extends EmitterShapeBase {
-    constructor(position, size, fill, options) {
+    filter;
+    pixelData;
+    scale;
+    _container;
+    constructor(container, position, size, fill, options) {
         super(position, size, fill, options);
+        this._container = container;
         const filter = options.filter, minAlpha = 0;
         let filterFunc = (pixel) => pixel.a > minAlpha;
         if (isString(filter)) {
-            if (Object.hasOwn(globalThis, filter)) {
+            if (filter in globalThis) {
                 const wndFilter = globalThis[filter];
                 if (isFunction(wndFilter)) {
                     filterFunc = wndFilter;
@@ -34,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, this._container.canvas.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", this._container.canvas.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
             if (isNull(data)) {
                 return;
             }

package/browser/EmittersCanvasShapeGenerator.js

@@ -1,9 +1,9 @@
 import { EmittersCanvasShape } from "./EmittersCanvasShape.js";
 import { EmittersCanvasShapeOptions } from "./Options/Classes/EmittersCanvasShapeOptions.js";
 export class EmittersCanvasShapeGenerator {
-    generate(position, size, fill, options) {
+    generate(container, position, size, fill, options) {
         const shapeOptions = new EmittersCanvasShapeOptions();
         shapeOptions.load(options);
-        return new EmittersCanvasShape(position, size, fill, shapeOptions);
+        return new EmittersCanvasShape(container, position, size, fill, shapeOptions);
     }
 }

package/browser/Options/Classes/EmittersCanvasShapeOptions.js

@@ -3,6 +3,13 @@ import { PixelsOptions } from "./PixelsOptions.js";
 import { TextOptions } from "./TextOptions.js";
 const minAlpha = 0;
 export class EmittersCanvasShapeOptions {
+    element;
+    filter;
+    image;
+    pixels;
+    scale;
+    selector;
+    text;
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions();

package/browser/Options/Classes/PixelsOptions.js

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

package/browser/Options/Classes/TextFontOptions.js

@@ -1,5 +1,10 @@
 import { isNull } from "@tsparticles/engine";
 export class TextFontOptions {
+    family;
+    size;
+    style;
+    variant;
+    weight;
     constructor() {
         this.family = "Verdana";
         this.size = 32;

package/browser/Options/Classes/TextLinesOptions.js

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

package/browser/Options/Classes/TextOptions.js

@@ -2,6 +2,10 @@ import { isNull } from "@tsparticles/engine";
 import { TextFontOptions } from "./TextFontOptions.js";
 import { TextLinesOptions } from "./TextLinesOptions.js";
 export class TextOptions {
+    color;
+    font;
+    lines;
+    text;
     constructor() {
         this.color = "#000000";
         this.font = new TextFontOptions();

package/browser/index.js

@@ -1,10 +1,9 @@
 export async function loadEmittersShapeCanvas(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        if (!e.addEmitterShapeGenerator) {
-            throw new Error("tsParticles emitters plugin missing or initialized after shapes");
-        }
+        const { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
+        ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/cjs/EmittersCanvasShape.js

@@ -1,14 +1,19 @@
-import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
 import { getRandom, half, isFunction, isNull, isString, safeDocument, } from "@tsparticles/engine";
-import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
+import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
 const maxRetries = 100;
 export class EmittersCanvasShape extends EmitterShapeBase {
-    constructor(position, size, fill, options) {
+    filter;
+    pixelData;
+    scale;
+    _container;
+    constructor(container, position, size, fill, options) {
         super(position, size, fill, options);
+        this._container = container;
         const filter = options.filter, minAlpha = 0;
         let filterFunc = (pixel) => pixel.a > minAlpha;
         if (isString(filter)) {
-            if (Object.hasOwn(globalThis, filter)) {
+            if (filter in globalThis) {
                 const wndFilter = globalThis[filter];
                 if (isFunction(wndFilter)) {
                     filterFunc = wndFilter;
@@ -34,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, this._container.canvas.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", this._container.canvas.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
             if (isNull(data)) {
                 return;
             }

package/cjs/EmittersCanvasShapeGenerator.js

@@ -1,9 +1,9 @@
 import { EmittersCanvasShape } from "./EmittersCanvasShape.js";
 import { EmittersCanvasShapeOptions } from "./Options/Classes/EmittersCanvasShapeOptions.js";
 export class EmittersCanvasShapeGenerator {
-    generate(position, size, fill, options) {
+    generate(container, position, size, fill, options) {
         const shapeOptions = new EmittersCanvasShapeOptions();
         shapeOptions.load(options);
-        return new EmittersCanvasShape(position, size, fill, shapeOptions);
+        return new EmittersCanvasShape(container, position, size, fill, shapeOptions);
     }
 }

package/cjs/Options/Classes/EmittersCanvasShapeOptions.js

@@ -3,6 +3,13 @@ import { PixelsOptions } from "./PixelsOptions.js";
 import { TextOptions } from "./TextOptions.js";
 const minAlpha = 0;
 export class EmittersCanvasShapeOptions {
+    element;
+    filter;
+    image;
+    pixels;
+    scale;
+    selector;
+    text;
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions();

package/cjs/Options/Classes/PixelsOptions.js

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

package/cjs/Options/Classes/TextFontOptions.js

@@ -1,5 +1,10 @@
 import { isNull } from "@tsparticles/engine";
 export class TextFontOptions {
+    family;
+    size;
+    style;
+    variant;
+    weight;
     constructor() {
         this.family = "Verdana";
         this.size = 32;

package/cjs/Options/Classes/TextLinesOptions.js

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

package/cjs/Options/Classes/TextOptions.js

@@ -2,6 +2,10 @@ import { isNull } from "@tsparticles/engine";
 import { TextFontOptions } from "./TextFontOptions.js";
 import { TextLinesOptions } from "./TextLinesOptions.js";
 export class TextOptions {
+    color;
+    font;
+    lines;
+    text;
     constructor() {
         this.color = "#000000";
         this.font = new TextFontOptions();

package/cjs/index.js

@@ -1,10 +1,9 @@
 export async function loadEmittersShapeCanvas(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        if (!e.addEmitterShapeGenerator) {
-            throw new Error("tsParticles emitters plugin missing or initialized after shapes");
-        }
+        const { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
+        ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/dist_browser_EmittersCanvasShapeGenerator_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.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 */   EmittersCanvasShape: () => (/* binding */ EmittersCanvasShape)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-emitters */ \"@tsparticles/plugin-emitters\");\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\nconst maxRetries = 100;\nclass EmittersCanvasShape extends _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_0__.EmitterShapeBase {\n  constructor(position, size, fill, options) {\n    super(position, size, fill, options);\n    const filter = options.filter,\n      minAlpha = 0;\n    let filterFunc = pixel => pixel.a > minAlpha;\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(filter)) {\n      if (Object.hasOwn(globalThis, filter)) {\n        const wndFilter = globalThis[filter];\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isFunction)(wndFilter)) {\n          filterFunc = wndFilter;\n        }\n      }\n    } else {\n      filterFunc = filter;\n    }\n    this.filter = filterFunc;\n    this.scale = options.scale;\n    this.pixelData = {\n      pixels: [],\n      height: 0,\n      width: 0\n    };\n  }\n  async init() {\n    let pixelData;\n    const options = this.options,\n      selector = options.selector,\n      pixels = options.pixels,\n      image = options.image,\n      element = options.element,\n      text = options.text,\n      offset = pixels.offset;\n    if (image) {\n      const url = image.src;\n      if (!url) {\n        return;\n      }\n      pixelData = await (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getImageData)(url, offset);\n    } else if (element ?? selector) {\n      const canvas = element ?? (selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().querySelector(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_2__.getCanvasImageData)(context, canvas, offset);\n    } else {\n      const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill);\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n        return;\n      }\n      pixelData = data;\n    }\n    this.pixelData = pixelData;\n  }\n  randomPosition() {\n    const {\n        height,\n        width\n      } = this.pixelData,\n      data = this.pixelData,\n      position = this.position,\n      scale = this.scale,\n      positionOffset = {\n        x: position.x - width * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half,\n        y: position.y - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half\n      };\n    for (let i = 0; i < maxRetries; i++) {\n      const nextIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * width * height),\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 = this.filter(pixel);\n      if (!shouldCreateParticle) {\n        continue;\n      }\n      return {\n        position: {\n          x: pixelPos.x * scale + positionOffset.x,\n          y: pixelPos.y * scale + positionOffset.y\n        },\n        color: {\n          ...pixel\n        },\n        opacity: pixel.a\n      };\n    }\n    return null;\n  }\n  resize(position, size) {\n    super.resize(position, size);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShape.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShape: () => (/* binding */ EmittersCanvasShape)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-emitters */ \"@tsparticles/plugin-emitters\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\n\nconst maxRetries = 100;\nclass EmittersCanvasShape extends _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_1__.EmitterShapeBase {\n    filter;\n    pixelData;\n    scale;\n    _container;\n    constructor(container, position, size, fill, options){\n        super(position, size, fill, options);\n        this._container = container;\n        const filter = options.filter, minAlpha = 0;\n        let filterFunc = (pixel)=>pixel.a > minAlpha;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(filter)) {\n            if (filter in globalThis) {\n                const wndFilter = globalThis[filter];\n                if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(wndFilter)) {\n                    filterFunc = wndFilter;\n                }\n            }\n        } else {\n            filterFunc = filter;\n        }\n        this.filter = filterFunc;\n        this.scale = options.scale;\n        this.pixelData = {\n            pixels: [],\n            height: 0,\n            width: 0\n        };\n    }\n    async init() {\n        let pixelData;\n        const options = this.options, selector = options.selector, pixels = options.pixels, image = options.image, element = options.element, text = options.text, offset = pixels.offset;\n        if (image) {\n            const url = image.src;\n            if (!url) {\n                return;\n            }\n            pixelData = await (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getImageData)(url, offset, this._container.canvas.settings);\n        } else if (element ?? selector) {\n            const canvas = element ?? (selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelector(selector));\n            if (!canvas) {\n                return;\n            }\n            const context = canvas.getContext(\"2d\", this._container.canvas.settings);\n            if (!context) {\n                return;\n            }\n            pixelData = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getCanvasImageData)(context, canvas, offset);\n        } else {\n            const data = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill, this._container.canvas.settings);\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n                return;\n            }\n            pixelData = data;\n        }\n        this.pixelData = pixelData;\n    }\n    randomPosition() {\n        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {\n            x: position.x - width * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n            y: position.y - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n        };\n        for(let i = 0; i < maxRetries; i++){\n            const nextIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * width * height), 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 = this.filter(pixel);\n            if (!shouldCreateParticle) {\n                continue;\n            }\n            return {\n                position: {\n                    x: pixelPos.x * scale + positionOffset.x,\n                    y: pixelPos.y * scale + positionOffset.y\n                },\n                color: {\n                    ...pixel\n                },\n                opacity: pixel.a\n            };\n        }\n        return null;\n    }\n    resize(position, size) {\n        super.resize(position, size);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShape.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 */   EmittersCanvasShapeGenerator: () => (/* binding */ EmittersCanvasShapeGenerator)\n/* harmony export */ });\n/* harmony import */ var _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EmittersCanvasShape.js */ \"./dist/browser/EmittersCanvasShape.js\");\n/* harmony import */ var _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/EmittersCanvasShapeOptions.js */ \"./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js\");\n\n\nclass EmittersCanvasShapeGenerator {\n  generate(position, size, fill, options) {\n    const shapeOptions = new _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__.EmittersCanvasShapeOptions();\n    shapeOptions.load(options);\n    return new _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__.EmittersCanvasShape(position, size, fill, shapeOptions);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShapeGenerator.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShapeGenerator: () => (/* binding */ EmittersCanvasShapeGenerator)\n/* harmony export */ });\n/* harmony import */ var _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EmittersCanvasShape.js */ \"./dist/browser/EmittersCanvasShape.js\");\n/* harmony import */ var _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/EmittersCanvasShapeOptions.js */ \"./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js\");\n\n\nclass EmittersCanvasShapeGenerator {\n    generate(container, position, size, fill, options) {\n        const shapeOptions = new _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__.EmittersCanvasShapeOptions();\n        shapeOptions.load(options);\n        return new _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__.EmittersCanvasShape(container, position, size, fill, shapeOptions);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShapeGenerator.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 */   EmittersCanvasShapeOptions: () => (/* binding */ EmittersCanvasShapeOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PixelsOptions.js */ \"./dist/browser/Options/Classes/PixelsOptions.js\");\n/* harmony import */ var _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextOptions.js */ \"./dist/browser/Options/Classes/TextOptions.js\");\n\n\n\nconst minAlpha = 0;\nclass EmittersCanvasShapeOptions {\n  constructor() {\n    this.filter = pixel => pixel.a > minAlpha;\n    this.pixels = new _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__.PixelsOptions();\n    this.scale = 1;\n    this.selector = \"\";\n    this.text = new _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextOptions();\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.element !== undefined) {\n      this.element = data.element;\n    }\n    if (data.filter !== undefined) {\n      this.filter = data.filter;\n    }\n    this.pixels.load(data.pixels);\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.image !== undefined) {\n      this.image = data.image;\n    }\n    this.text.load(data.text);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShapeOptions: () => (/* binding */ EmittersCanvasShapeOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PixelsOptions.js */ \"./dist/browser/Options/Classes/PixelsOptions.js\");\n/* harmony import */ var _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextOptions.js */ \"./dist/browser/Options/Classes/TextOptions.js\");\n\n\n\nconst minAlpha = 0;\nclass EmittersCanvasShapeOptions {\n    element;\n    filter;\n    image;\n    pixels;\n    scale;\n    selector;\n    text;\n    constructor(){\n        this.filter = (pixel)=>pixel.a > minAlpha;\n        this.pixels = new _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__.PixelsOptions();\n        this.scale = 1;\n        this.selector = \"\";\n        this.text = new _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextOptions();\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.element !== undefined) {\n            this.element = data.element;\n        }\n        if (data.filter !== undefined) {\n            this.filter = data.filter;\n        }\n        this.pixels.load(data.pixels);\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.image !== undefined) {\n            this.image = data.image;\n        }\n        this.text.load(data.text);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/EmittersCanvasShapeOptions.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 */   PixelsOptions: () => (/* binding */ PixelsOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PixelsOptions {\n  constructor() {\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.offset !== undefined) {\n      this.offset = data.offset;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/PixelsOptions.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PixelsOptions: () => (/* binding */ PixelsOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PixelsOptions {\n    offset;\n    constructor(){\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.offset !== undefined) {\n            this.offset = data.offset;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/PixelsOptions.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 */   TextFontOptions: () => (/* binding */ TextFontOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextFontOptions {\n  constructor() {\n    this.family = \"Verdana\";\n    this.size = 32;\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//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/TextFontOptions.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextFontOptions: () => (/* binding */ TextFontOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextFontOptions {\n    family;\n    size;\n    style;\n    variant;\n    weight;\n    constructor(){\n        this.family = \"Verdana\";\n        this.size = 32;\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-emitters-shape-canvas/./dist/browser/Options/Classes/TextFontOptions.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 */   TextLinesOptions: () => (/* binding */ TextLinesOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextLinesOptions {\n  constructor() {\n    this.separator = \"\\n\";\n    this.spacing = 0;\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-emitters-shape-canvas/./dist/browser/Options/Classes/TextLinesOptions.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextLinesOptions: () => (/* binding */ TextLinesOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextLinesOptions {\n    separator;\n    spacing;\n    constructor(){\n        this.separator = \"\\n\";\n        this.spacing = 0;\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-emitters-shape-canvas/./dist/browser/Options/Classes/TextLinesOptions.js?\n}");
 
 /***/ },
 
@@ -83,17 +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 */   TextOptions: () => (/* binding */ TextOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextFontOptions.js */ \"./dist/browser/Options/Classes/TextFontOptions.js\");\n/* harmony import */ var _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextLinesOptions.js */ \"./dist/browser/Options/Classes/TextLinesOptions.js\");\n\n\n\nclass TextOptions {\n  constructor() {\n    this.color = \"#000000\";\n    this.font = new _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__.TextFontOptions();\n    this.lines = new _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextLinesOptions();\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-emitters-shape-canvas/./dist/browser/Options/Classes/TextOptions.js?\n}");
-
-/***/ },
-
-/***/ "./dist/browser/utils.js"
-/*!*******************************!*\
-  !*** ./dist/browser/utils.js ***!
-  \*******************************/
-(__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 */   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 origin = {\n    x: 0,\n    y: 0\n  },\n  minWidth = 0,\n  defaultRgbValue = 0,\n  defaultAlphaValue = 1;\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n  const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;\n  if (clear) {\n    ctx.clearRect(origin.x, origin.y, size.width, size.height);\n  }\n  const pixels = [];\n  for (let i = 0; i < imageData.length; i += offset) {\n    const idx = i / offset,\n      pos = {\n        x: idx % size.width,\n        y: Math.floor(idx / size.width)\n      };\n    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] ?? defaultRgbValue,\n      g: imageData[i + indexesOffset.g] ?? defaultRgbValue,\n      b: imageData[i + indexesOffset.b] ?? defaultRgbValue,\n      a: (imageData[i + indexesOffset.a] ?? defaultAlphaValue) / 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, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);\n      resolve(getCanvasImageData(context, canvas, offset));\n    };\n  });\n  image.src = src;\n  return p;\n}\nfunction getTextData(textOptions, offset, fill) {\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 || \"\"} ${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 || minWidth, lineData.width);\n    totalHeight += lineData.height + linesOptions.spacing;\n    linesData.push(lineData);\n  }\n  canvas.width = maxWidth;\n  canvas.height = totalHeight;\n  let currentHeight = 0;\n  for (const line of linesData) {\n    context.font = `${font.style || \"\"} ${font.variant || \"\"} ${font.weight || \"\"} ${fontSize} ${font.family}`;\n    if (fill) {\n      context.fillStyle = color;\n      context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    } else {\n      context.strokeStyle = color;\n      context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    }\n    currentHeight += line.height + linesOptions.spacing;\n  }\n  return getCanvasImageData(context, canvas, offset);\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextOptions: () => (/* binding */ TextOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextFontOptions.js */ \"./dist/browser/Options/Classes/TextFontOptions.js\");\n/* harmony import */ var _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextLinesOptions.js */ \"./dist/browser/Options/Classes/TextLinesOptions.js\");\n\n\n\nclass TextOptions {\n    color;\n    font;\n    lines;\n    text;\n    constructor(){\n        this.color = \"#000000\";\n        this.font = new _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__.TextFontOptions();\n        this.lines = new _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextLinesOptions();\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\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/TextOptions.js?\n}");
 
 /***/ }
 

package/esm/EmittersCanvasShape.js

@@ -1,14 +1,19 @@
-import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
 import { getRandom, half, isFunction, isNull, isString, safeDocument, } from "@tsparticles/engine";
-import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
+import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
 const maxRetries = 100;
 export class EmittersCanvasShape extends EmitterShapeBase {
-    constructor(position, size, fill, options) {
+    filter;
+    pixelData;
+    scale;
+    _container;
+    constructor(container, position, size, fill, options) {
         super(position, size, fill, options);
+        this._container = container;
         const filter = options.filter, minAlpha = 0;
         let filterFunc = (pixel) => pixel.a > minAlpha;
         if (isString(filter)) {
-            if (Object.hasOwn(globalThis, filter)) {
+            if (filter in globalThis) {
                 const wndFilter = globalThis[filter];
                 if (isFunction(wndFilter)) {
                     filterFunc = wndFilter;
@@ -34,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset);
+            pixelData = await getImageData(url, offset, this._container.canvas.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d");
+            const context = canvas.getContext("2d", this._container.canvas.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
             if (isNull(data)) {
                 return;
             }

package/esm/EmittersCanvasShapeGenerator.js

@@ -1,9 +1,9 @@
 import { EmittersCanvasShape } from "./EmittersCanvasShape.js";
 import { EmittersCanvasShapeOptions } from "./Options/Classes/EmittersCanvasShapeOptions.js";
 export class EmittersCanvasShapeGenerator {
-    generate(position, size, fill, options) {
+    generate(container, position, size, fill, options) {
         const shapeOptions = new EmittersCanvasShapeOptions();
         shapeOptions.load(options);
-        return new EmittersCanvasShape(position, size, fill, shapeOptions);
+        return new EmittersCanvasShape(container, position, size, fill, shapeOptions);
     }
 }

package/esm/Options/Classes/EmittersCanvasShapeOptions.js

@@ -3,6 +3,13 @@ import { PixelsOptions } from "./PixelsOptions.js";
 import { TextOptions } from "./TextOptions.js";
 const minAlpha = 0;
 export class EmittersCanvasShapeOptions {
+    element;
+    filter;
+    image;
+    pixels;
+    scale;
+    selector;
+    text;
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions();

package/esm/Options/Classes/PixelsOptions.js

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

package/esm/Options/Classes/TextFontOptions.js

@@ -1,5 +1,10 @@
 import { isNull } from "@tsparticles/engine";
 export class TextFontOptions {
+    family;
+    size;
+    style;
+    variant;
+    weight;
     constructor() {
         this.family = "Verdana";
         this.size = 32;

package/esm/Options/Classes/TextLinesOptions.js

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

package/esm/Options/Classes/TextOptions.js

@@ -2,6 +2,10 @@ import { isNull } from "@tsparticles/engine";
 import { TextFontOptions } from "./TextFontOptions.js";
 import { TextLinesOptions } from "./TextLinesOptions.js";
 export class TextOptions {
+    color;
+    font;
+    lines;
+    text;
     constructor() {
         this.color = "#000000";
         this.font = new TextFontOptions();

package/esm/index.js

@@ -1,10 +1,9 @@
 export async function loadEmittersShapeCanvas(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        if (!e.addEmitterShapeGenerator) {
-            throw new Error("tsParticles emitters plugin missing or initialized after shapes");
-        }
+        const { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
+        ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/package.json

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

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/plugin-emitters-shape-canvas [23 Jan 2026 at 23:57]</title>
+    <title>@tsparticles/plugin-emitters-shape-canvas [19 Mar 2026 at 14:01]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>