@tsparticles/plugin-emitters-shape-canvas 3.0.3 → 3.2.0

package/720.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 720.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_emitters_shape_canvas=this.webpackChunk_tsparticles_plugin_emitters_shape_canvas||[]).push([[720],{720:(t,e,i)=>{i.d(e,{EmittersCanvasShapeGenerator:()=>g});var s=i(68),o=i(533);const n={x:0,y:0};function a(t,e,i,s=!0){const o=t.getImageData(n.x,n.y,e.width,e.height).data;s&&t.clearRect(n.x,n.y,e.width,e.height);const a=[];for(let t=0;t<o.length;t+=i){const s=t/i,n={x:s%e.width,y:Math.floor(s/e.width)};a[n.y]||(a[n.y]=[]);const r={r:0,g:1,b:2,a:3},l=255;a[n.y][n.x]={r:o[t+r.r],g:o[t+r.g],b:o[t+r.b],a:o[t+r.a]/l}}return{pixels:a,width:Math.min(...a.map((t=>t.length))),height:a.length}}class r extends s.EmitterShapeBase{constructor(t,e,i,s){super(t,e,i,s);const n=s.filter;let a=t=>t.a>0;if(void 0!==n)if((0,o.isString)(n)){if(Object.hasOwn(window,n)){const t=window[n];(0,o.isFunction)(t)&&(a=t)}}else a=n;this.filter=a,this.scale=s.scale,this.pixelData={pixels:[],height:0,width:0}}async init(){let t;const e=this.options,i=e.selector,s=e.pixels,r=e.image,l=e.element,h=e.text,c=s.offset;if(r){const e=r.src;if(!e)return;t=await function(t,e){const i=new Image;i.crossOrigin="Anonymous";const s=new Promise(((t,s)=>{i.onerror=s,i.onload=()=>{const r=document.createElement("canvas");r.width=i.width,r.height=i.height;const l=r.getContext("2d");if(!l)return s(new Error(`${o.errorPrefix} Could not get canvas context`));l.drawImage(i,n.x,n.y,i.width,i.height,n.x,n.y,r.width,r.height),t(a(l,r,e))}}));return i.src=t,s}(e,c)}else if(h){const e=function(t,e,i){const s=document.createElement("canvas"),r=s.getContext("2d"),{font:l,text:h,lines:c,color:d}=t;if(!h||!r)return;const f=h.split(c.separator),g=(0,o.isNumber)(l.size)?`${l.size}px`:l.size,x=[];let u=0,p=0;for(const t of f){r.font=`${l.style||""} ${l.variant||""} ${l.weight||""} ${g} ${l.family}`;const e=r.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};u=Math.max(u||0,i.width),p+=i.height+c.spacing,x.push(i)}s.width=u,s.height=p;let m=0;for(const t of x)r.font=`${l.style||""} ${l.variant||""} ${l.weight||""} ${g} ${l.family}`,i?(r.fillStyle=d,r.fillText(t.text,n.x,m+t.measure.actualBoundingBoxAscent)):(r.strokeStyle=d,r.strokeText(t.text,n.x,m+t.measure.actualBoundingBoxAscent)),m+=t.height+c.spacing;return a(r,s,e)}(h,c,this.fill);if(!e)return;t=e}else if(l??i){const e=l??(i&&document.querySelector(i));if(!e)return;const s=e.getContext("2d");if(!s)return;t=a(s,e,c)}t&&(this.pixelData=t)}async randomPosition(){const{height:t,width:e}=this.pixelData,i=this.pixelData,s=this.position,n=this.scale,a=s.x-e*n*.5,r=s.y-t*n*.5;for(let s=0;s<100;s++){const s=Math.floor((0,o.getRandom)()*e*t),l={x:s%e,y:Math.floor(s/e)},h=i.pixels[l.y][l.x];if(this.filter(h))return Promise.resolve({position:{x:l.x*n+a,y:l.y*n+r},color:{...h},opacity:h.a})}return Promise.resolve(null)}resize(t,e){super.resize(t,e)}}class l{constructor(){this.offset=4}load(t){t&&void 0!==t.offset&&(this.offset=t.offset)}}class h{constructor(){this.family="Verdana",this.size=32,this.style="",this.variant="",this.weight=""}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 c{constructor(){this.separator="\n",this.spacing=0}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class d{constructor(){this.color="#000000",this.font=new h,this.lines=new c,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 f{constructor(){this.filter=t=>t.a>0,this.pixels=new l,this.scale=1,this.selector="",this.text=new d}load(t){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 g{generate(t,e,i,s){const o=new f;return o.load(s),new r(t,e,i,o)}}}}]);

package/720.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Emitters Shape Canvas Plugin v3.2.0 by Matteo Bruni */

package/browser/EmittersCanvasShape.js

@@ -1,11 +1,12 @@
 import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
 import { getRandom, isFunction, isString } from "@tsparticles/engine";
 import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+const maxRetries = 100, half = 0.5;
 export class EmittersCanvasShape extends EmitterShapeBase {
     constructor(position, size, fill, options) {
         super(position, size, fill, options);
-        const filter = options.filter;
-        let filterFunc = (pixel) => pixel.a > 0;
+        const filter = options.filter, minAlpha = 0;
+        let filterFunc = (pixel) => pixel.a > minAlpha;
         if (filter !== undefined) {
             if (isString(filter)) {
                 if (Object.hasOwn(window, filter)) {
@@ -44,8 +45,8 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             }
             pixelData = data;
         }
-        else if (element || selector) {
-            const canvas = element || (selector && document.querySelector(selector));
+        else if (element ?? selector) {
+            const canvas = element ?? (selector && document.querySelector(selector));
             if (!canvas) {
                 return;
             }
@@ -61,12 +62,11 @@ export class EmittersCanvasShape extends EmitterShapeBase {
         this.pixelData = pixelData;
     }
     async randomPosition() {
-        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale;
-        const positionOffset = {
-            x: position.x - (width * scale) / 2,
-            y: position.y - (height * scale) / 2,
+        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {
+            x: position.x - width * scale * half,
+            y: position.y - height * scale * half,
         };
-        for (let i = 0; i < 100; i++) {
+        for (let i = 0; i < maxRetries; i++) {
             const nextIndex = Math.floor(getRandom() * width * height), pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
@@ -74,16 +74,16 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!shouldCreateParticle) {
                 continue;
             }
-            return {
+            return Promise.resolve({
                 position: {
                     x: pixelPos.x * scale + positionOffset.x,
                     y: pixelPos.y * scale + positionOffset.y,
                 },
                 color: { ...pixel },
                 opacity: pixel.a,
-            };
+            });
         }
-        return null;
+        return Promise.resolve(null);
     }
     resize(position, size) {
         super.resize(position, size);

package/browser/Options/Classes/EmittersCanvasShapeOptions.js

@@ -1,8 +1,9 @@
 import { PixelsOptions } from "./PixelsOptions.js";
 import { TextOptions } from "./TextOptions.js";
+const minAlpha = 0;
 export class EmittersCanvasShapeOptions {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions();
         this.scale = 1;
         this.selector = "";

package/browser/index.js

@@ -1,7 +1,5 @@
-import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
 export async function loadEmittersShapeCanvas(engine, refresh = true) {
-    const emittersEngine = engine;
-    emittersEngine.addEmitterShapeGenerator &&
-        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+    const emittersEngine = engine, { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
+    emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     await emittersEngine.refresh(refresh);
 }

package/browser/utils.js

@@ -1,8 +1,12 @@
 import { errorPrefix, isNumber } from "@tsparticles/engine";
+const origin = {
+    x: 0,
+    y: 0,
+}, minWidth = 0;
 export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -13,11 +17,17 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -39,7 +49,7 @@ export function getImageData(src, offset) {
             if (!context) {
                 return reject(new Error(`${errorPrefix} Could not get canvas context`));
             }
-            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -61,7 +71,7 @@ export function getTextData(textOptions, offset, fill) {
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || minWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -72,11 +82,11 @@ export function getTextData(textOptions, offset, fill) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
         if (fill) {
             context.fillStyle = color;
-            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         else {
             context.strokeStyle = color;
-            context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         currentHeight += line.height + linesOptions.spacing;
     }

package/cjs/EmittersCanvasShape.js

@@ -4,11 +4,12 @@ exports.EmittersCanvasShape = void 0;
 const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
 const engine_1 = require("@tsparticles/engine");
 const utils_js_1 = require("./utils.js");
+const maxRetries = 100, half = 0.5;
 class EmittersCanvasShape extends plugin_emitters_1.EmitterShapeBase {
     constructor(position, size, fill, options) {
         super(position, size, fill, options);
-        const filter = options.filter;
-        let filterFunc = (pixel) => pixel.a > 0;
+        const filter = options.filter, minAlpha = 0;
+        let filterFunc = (pixel) => pixel.a > minAlpha;
         if (filter !== undefined) {
             if ((0, engine_1.isString)(filter)) {
                 if (Object.hasOwn(window, filter)) {
@@ -47,8 +48,8 @@ class EmittersCanvasShape extends plugin_emitters_1.EmitterShapeBase {
             }
             pixelData = data;
         }
-        else if (element || selector) {
-            const canvas = element || (selector && document.querySelector(selector));
+        else if (element ?? selector) {
+            const canvas = element ?? (selector && document.querySelector(selector));
             if (!canvas) {
                 return;
             }
@@ -64,12 +65,11 @@ class EmittersCanvasShape extends plugin_emitters_1.EmitterShapeBase {
         this.pixelData = pixelData;
     }
     async randomPosition() {
-        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale;
-        const positionOffset = {
-            x: position.x - (width * scale) / 2,
-            y: position.y - (height * scale) / 2,
+        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {
+            x: position.x - width * scale * half,
+            y: position.y - height * scale * half,
         };
-        for (let i = 0; i < 100; i++) {
+        for (let i = 0; i < maxRetries; i++) {
             const nextIndex = Math.floor((0, engine_1.getRandom)() * width * height), pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
@@ -77,16 +77,16 @@ class EmittersCanvasShape extends plugin_emitters_1.EmitterShapeBase {
             if (!shouldCreateParticle) {
                 continue;
             }
-            return {
+            return Promise.resolve({
                 position: {
                     x: pixelPos.x * scale + positionOffset.x,
                     y: pixelPos.y * scale + positionOffset.y,
                 },
                 color: { ...pixel },
                 opacity: pixel.a,
-            };
+            });
         }
-        return null;
+        return Promise.resolve(null);
     }
     resize(position, size) {
         super.resize(position, size);

package/cjs/Options/Classes/EmittersCanvasShapeOptions.js

@@ -3,9 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmittersCanvasShapeOptions = void 0;
 const PixelsOptions_js_1 = require("./PixelsOptions.js");
 const TextOptions_js_1 = require("./TextOptions.js");
+const minAlpha = 0;
 class EmittersCanvasShapeOptions {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions_js_1.PixelsOptions();
         this.scale = 1;
         this.selector = "";

package/cjs/index.js

@@ -1,11 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEmittersShapeCanvas = void 0;
-const EmittersCanvasShapeGenerator_js_1 = require("./EmittersCanvasShapeGenerator.js");
 async function loadEmittersShapeCanvas(engine, refresh = true) {
-    const emittersEngine = engine;
-    emittersEngine.addEmitterShapeGenerator &&
-        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator_js_1.EmittersCanvasShapeGenerator());
+    const emittersEngine = engine, { EmittersCanvasShapeGenerator } = await Promise.resolve().then(() => __importStar(require("./EmittersCanvasShapeGenerator.js")));
+    emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     await emittersEngine.refresh(refresh);
 }
 exports.loadEmittersShapeCanvas = loadEmittersShapeCanvas;

package/cjs/utils.js

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTextData = exports.getImageData = exports.getCanvasImageData = void 0;
 const engine_1 = require("@tsparticles/engine");
+const origin = {
+    x: 0,
+    y: 0,
+}, minWidth = 0;
 function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -16,11 +20,17 @@ function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -43,7 +53,7 @@ function getImageData(src, offset) {
             if (!context) {
                 return reject(new Error(`${engine_1.errorPrefix} Could not get canvas context`));
             }
-            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -66,7 +76,7 @@ function getTextData(textOptions, offset, fill) {
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || minWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -77,11 +87,11 @@ function getTextData(textOptions, offset, fill) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
         if (fill) {
             context.fillStyle = color;
-            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         else {
             context.strokeStyle = color;
-            context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         currentHeight += line.height + linesOptions.spacing;
     }

package/dist_browser_EmittersCanvasShapeGenerator_js.js

@@ -0,0 +1,100 @@
+/*!
+ * 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.2.0
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_emitters_shape_canvas"] = this["webpackChunk_tsparticles_plugin_emitters_shape_canvas"] || []).push([["dist_browser_EmittersCanvasShapeGenerator_js"],{
+
+/***/ "./dist/browser/EmittersCanvasShape.js":
+/*!*********************************************!*\
+  !*** ./dist/browser/EmittersCanvasShape.js ***!
+  \*********************************************/
+/***/ ((__unused_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_plugin_emitters__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n\n\n\nconst maxRetries = 100,\n  half = 0.5;\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 (filter !== undefined) {\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(filter)) {\n        if (Object.hasOwn(window, filter)) {\n          const wndFilter = window[filter];\n          if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isFunction)(wndFilter)) {\n            filterFunc = wndFilter;\n          }\n        }\n      } else {\n        filterFunc = filter;\n      }\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 (text) {\n      const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill);\n      if (!data) {\n        return;\n      }\n      pixelData = data;\n    } else if (element ?? selector) {\n      const canvas = element ?? (selector && document.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    }\n    if (!pixelData) {\n      return;\n    }\n    this.pixelData = pixelData;\n  }\n  async 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 * half,\n        y: position.y - height * scale * 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        pixel = data.pixels[pixelPos.y][pixelPos.x],\n        shouldCreateParticle = this.filter(pixel);\n      if (!shouldCreateParticle) {\n        continue;\n      }\n      return Promise.resolve({\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 Promise.resolve(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?");
+
+/***/ }),
+
+/***/ "./dist/browser/EmittersCanvasShapeGenerator.js":
+/*!******************************************************!*\
+  !*** ./dist/browser/EmittersCanvasShapeGenerator.js ***!
+  \******************************************************/
+/***/ ((__unused_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_1__ = __webpack_require__(/*! ./EmittersCanvasShape.js */ \"./dist/browser/EmittersCanvasShape.js\");\n/* harmony import */ var _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_0__ = __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_0__.EmittersCanvasShapeOptions();\n    shapeOptions.load(options);\n    return new _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_1__.EmittersCanvasShape(position, size, fill, shapeOptions);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShapeGenerator.js?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js":
+/*!********************************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js ***!
+  \********************************************************************/
+/***/ ((__unused_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 _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PixelsOptions.js */ \"./dist/browser/Options/Classes/PixelsOptions.js\");\n/* harmony import */ var _TextOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextOptions.js */ \"./dist/browser/Options/Classes/TextOptions.js\");\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_0__.PixelsOptions();\n    this.scale = 1;\n    this.selector = \"\";\n    this.text = new _TextOptions_js__WEBPACK_IMPORTED_MODULE_1__.TextOptions();\n  }\n  load(data) {\n    if (!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?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/PixelsOptions.js":
+/*!*******************************************************!*\
+  !*** ./dist/browser/Options/Classes/PixelsOptions.js ***!
+  \*******************************************************/
+/***/ ((__unused_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 */ });\nclass PixelsOptions {\n  constructor() {\n    this.offset = 4;\n  }\n  load(data) {\n    if (!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?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/TextFontOptions.js":
+/*!*********************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextFontOptions.js ***!
+  \*********************************************************/
+/***/ ((__unused_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 */ });\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 (!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?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/TextLinesOptions.js":
+/*!**********************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextLinesOptions.js ***!
+  \**********************************************************/
+/***/ ((__unused_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 */ });\nclass TextLinesOptions {\n  constructor() {\n    this.separator = \"\\n\";\n    this.spacing = 0;\n  }\n  load(data) {\n    if (!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?");
+
+/***/ }),
+
+/***/ "./dist/browser/Options/Classes/TextOptions.js":
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextOptions.js ***!
+  \*****************************************************/
+/***/ ((__unused_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 _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./TextFontOptions.js */ \"./dist/browser/Options/Classes/TextFontOptions.js\");\n/* harmony import */ var _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextLinesOptions.js */ \"./dist/browser/Options/Classes/TextLinesOptions.js\");\n\n\nclass TextOptions {\n  constructor() {\n    this.color = \"#000000\";\n    this.font = new _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_0__.TextFontOptions();\n    this.lines = new _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_1__.TextLinesOptions();\n    this.text = \"\";\n  }\n  load(data) {\n    if (!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?");
+
+/***/ }),
+
+/***/ "./dist/browser/utils.js":
+/*!*******************************!*\
+  !*** ./dist/browser/utils.js ***!
+  \*******************************/
+/***/ ((__unused_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/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst origin = {\n    x: 0,\n    y: 0\n  },\n  minWidth = 0;\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    if (!pixels[pos.y]) {\n      pixels[pos.y] = [];\n    }\n    const indexesOffset = {\n        r: 0,\n        g: 1,\n        b: 2,\n        a: 3\n      },\n      alphaFactor = 255;\n    pixels[pos.y][pos.x] = {\n      r: imageData[i + indexesOffset.r],\n      g: imageData[i + indexesOffset.g],\n      b: imageData[i + indexesOffset.b],\n      a: imageData[i + indexesOffset.a] / 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 = document.createElement(\"canvas\");\n      canvas.width = image.width;\n      canvas.height = image.height;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return reject(new Error(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} Could not get canvas context`));\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 = document.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}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?");
+
+/***/ })
+
+}]);

package/esm/EmittersCanvasShape.js

@@ -1,11 +1,12 @@
 import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
 import { getRandom, isFunction, isString } from "@tsparticles/engine";
 import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
+const maxRetries = 100, half = 0.5;
 export class EmittersCanvasShape extends EmitterShapeBase {
     constructor(position, size, fill, options) {
         super(position, size, fill, options);
-        const filter = options.filter;
-        let filterFunc = (pixel) => pixel.a > 0;
+        const filter = options.filter, minAlpha = 0;
+        let filterFunc = (pixel) => pixel.a > minAlpha;
         if (filter !== undefined) {
             if (isString(filter)) {
                 if (Object.hasOwn(window, filter)) {
@@ -44,8 +45,8 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             }
             pixelData = data;
         }
-        else if (element || selector) {
-            const canvas = element || (selector && document.querySelector(selector));
+        else if (element ?? selector) {
+            const canvas = element ?? (selector && document.querySelector(selector));
             if (!canvas) {
                 return;
             }
@@ -61,12 +62,11 @@ export class EmittersCanvasShape extends EmitterShapeBase {
         this.pixelData = pixelData;
     }
     async randomPosition() {
-        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale;
-        const positionOffset = {
-            x: position.x - (width * scale) / 2,
-            y: position.y - (height * scale) / 2,
+        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {
+            x: position.x - width * scale * half,
+            y: position.y - height * scale * half,
         };
-        for (let i = 0; i < 100; i++) {
+        for (let i = 0; i < maxRetries; i++) {
             const nextIndex = Math.floor(getRandom() * width * height), pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
@@ -74,16 +74,16 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!shouldCreateParticle) {
                 continue;
             }
-            return {
+            return Promise.resolve({
                 position: {
                     x: pixelPos.x * scale + positionOffset.x,
                     y: pixelPos.y * scale + positionOffset.y,
                 },
                 color: { ...pixel },
                 opacity: pixel.a,
-            };
+            });
         }
-        return null;
+        return Promise.resolve(null);
     }
     resize(position, size) {
         super.resize(position, size);

package/esm/Options/Classes/EmittersCanvasShapeOptions.js

@@ -1,8 +1,9 @@
 import { PixelsOptions } from "./PixelsOptions.js";
 import { TextOptions } from "./TextOptions.js";
+const minAlpha = 0;
 export class EmittersCanvasShapeOptions {
     constructor() {
-        this.filter = (pixel) => pixel.a > 0;
+        this.filter = (pixel) => pixel.a > minAlpha;
         this.pixels = new PixelsOptions();
         this.scale = 1;
         this.selector = "";

package/esm/index.js

@@ -1,7 +1,5 @@
-import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
 export async function loadEmittersShapeCanvas(engine, refresh = true) {
-    const emittersEngine = engine;
-    emittersEngine.addEmitterShapeGenerator &&
-        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+    const emittersEngine = engine, { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
+    emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     await emittersEngine.refresh(refresh);
 }

package/esm/utils.js

@@ -1,8 +1,12 @@
 import { errorPrefix, isNumber } from "@tsparticles/engine";
+const origin = {
+    x: 0,
+    y: 0,
+}, minWidth = 0;
 export function getCanvasImageData(ctx, size, offset, clear = true) {
-    const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+    const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
-        ctx.clearRect(0, 0, size.width, size.height);
+        ctx.clearRect(origin.x, origin.y, size.width, size.height);
     }
     const pixels = [];
     for (let i = 0; i < imageData.length; i += offset) {
@@ -13,11 +17,17 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
         if (!pixels[pos.y]) {
             pixels[pos.y] = [];
         }
+        const indexesOffset = {
+            r: 0,
+            g: 1,
+            b: 2,
+            a: 3,
+        }, alphaFactor = 255;
         pixels[pos.y][pos.x] = {
-            r: imageData[i],
-            g: imageData[i + 1],
-            b: imageData[i + 2],
-            a: imageData[i + 3] / 255,
+            r: imageData[i + indexesOffset.r],
+            g: imageData[i + indexesOffset.g],
+            b: imageData[i + indexesOffset.b],
+            a: imageData[i + indexesOffset.a] / alphaFactor,
         };
     }
     return {
@@ -39,7 +49,7 @@ export function getImageData(src, offset) {
             if (!context) {
                 return reject(new Error(`${errorPrefix} Could not get canvas context`));
             }
-            context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+            context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
         };
     });
@@ -61,7 +71,7 @@ export function getTextData(textOptions, offset, fill) {
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
             width: measure.width,
         };
-        maxWidth = Math.max(maxWidth || 0, lineData.width);
+        maxWidth = Math.max(maxWidth || minWidth, lineData.width);
         totalHeight += lineData.height + linesOptions.spacing;
         linesData.push(lineData);
     }
@@ -72,11 +82,11 @@ export function getTextData(textOptions, offset, fill) {
         context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
         if (fill) {
             context.fillStyle = color;
-            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         else {
             context.strokeStyle = color;
-            context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         }
         currentHeight += line.height + linesOptions.spacing;
     }