@tsparticles/plugin-emitters-shape-canvas 3.0.2 → 3.1.0

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,6 @@
 import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
 export async function loadEmittersShapeCanvas(engine, refresh = true) {
     const emittersEngine = engine;
-    emittersEngine.addEmitterShapeGenerator &&
-        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+    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

@@ -4,8 +4,7 @@ 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());
+    emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator_js_1.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/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,6 @@
 import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
 export async function loadEmittersShapeCanvas(engine, refresh = true) {
     const emittersEngine = engine;
-    emittersEngine.addEmitterShapeGenerator &&
-        emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+    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;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-emitters-shape-canvas",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "tsParticles emitters shape canvas plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -100,8 +100,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.0.2",
-    "@tsparticles/plugin-emitters": "^3.0.2"
+    "@tsparticles/engine": "^3.1.0",
+    "@tsparticles/plugin-emitters": "^3.1.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 [6 Dec 2023 at 17:48]</title>
+    <title>@tsparticles/plugin-emitters-shape-canvas [13 Jan 2024 at 23:10]</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>
@@ -31,7 +31,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"tsparticles.plugin.emitters.shape.canvas.js","isAsset":true,"statSize":9297,"parsedSize":13513,"gzipSize":3576,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":9213,"groups":[{"id":314,"label":"index.js + 8 modules (concatenated)","path":"./dist/browser/index.js + 8 modules (concatenated)","statSize":9213,"parsedSize":13513,"gzipSize":3576,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser","statSize":9213,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/index.js","statSize":361,"parsedSize":529,"gzipSize":140,"inaccurateSizes":true},{"id":null,"label":"EmittersCanvasShapeGenerator.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/EmittersCanvasShapeGenerator.js","statSize":414,"parsedSize":607,"gzipSize":160,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes","statSize":2511,"groups":[{"id":null,"label":"EmittersCanvasShapeOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/EmittersCanvasShapeOptions.js","statSize":828,"parsedSize":1214,"gzipSize":321,"inaccurateSizes":true},{"id":null,"label":"PixelsOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PixelsOptions.js","statSize":205,"parsedSize":300,"gzipSize":79,"inaccurateSizes":true},{"id":null,"label":"TextOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextOptions.js","statSize":555,"parsedSize":814,"gzipSize":215,"inaccurateSizes":true},{"id":null,"label":"TextFontOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextFontOptions.js","statSize":599,"parsedSize":878,"gzipSize":232,"inaccurateSizes":true},{"id":null,"label":"TextLinesOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextLinesOptions.js","statSize":324,"parsedSize":475,"gzipSize":125,"inaccurateSizes":true}],"parsedSize":3682,"gzipSize":974,"inaccurateSizes":true},{"id":null,"label":"EmittersCanvasShape.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/EmittersCanvasShape.js","statSize":2830,"parsedSize":4150,"gzipSize":1098,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/utils.js","statSize":3097,"parsedSize":4542,"gzipSize":1202,"inaccurateSizes":true}],"parsedSize":13513,"gzipSize":3576,"inaccurateSizes":true}]}],"parsedSize":13513,"gzipSize":3576},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0},{"label":"plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles","path":"./plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":68,"label":"plugin-emitters\",\"root\":\"window\"}","path":"./plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles/plugin-emitters\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.plugin.emitters.shape.canvas":true}}];
+      window.chartData = [{"label":"tsparticles.plugin.emitters.shape.canvas.js","isAsset":true,"statSize":9718,"parsedSize":13934,"gzipSize":3694,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":9634,"groups":[{"id":806,"label":"index.js + 8 modules (concatenated)","path":"./dist/browser/index.js + 8 modules (concatenated)","statSize":9634,"parsedSize":13934,"gzipSize":3694,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser","statSize":9634,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/index.js","statSize":320,"parsedSize":462,"gzipSize":122,"inaccurateSizes":true},{"id":null,"label":"EmittersCanvasShapeGenerator.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/EmittersCanvasShapeGenerator.js","statSize":414,"parsedSize":598,"gzipSize":158,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes","statSize":2538,"groups":[{"id":null,"label":"EmittersCanvasShapeOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/EmittersCanvasShapeOptions.js","statSize":855,"parsedSize":1236,"gzipSize":327,"inaccurateSizes":true},{"id":null,"label":"PixelsOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PixelsOptions.js","statSize":205,"parsedSize":296,"gzipSize":78,"inaccurateSizes":true},{"id":null,"label":"TextOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextOptions.js","statSize":555,"parsedSize":802,"gzipSize":212,"inaccurateSizes":true},{"id":null,"label":"TextFontOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextFontOptions.js","statSize":599,"parsedSize":866,"gzipSize":229,"inaccurateSizes":true},{"id":null,"label":"TextLinesOptions.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/TextLinesOptions.js","statSize":324,"parsedSize":468,"gzipSize":124,"inaccurateSizes":true}],"parsedSize":3670,"gzipSize":973,"inaccurateSizes":true},{"id":null,"label":"EmittersCanvasShape.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/EmittersCanvasShape.js","statSize":2946,"parsedSize":4260,"gzipSize":1129,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/utils.js","statSize":3416,"parsedSize":4940,"gzipSize":1309,"inaccurateSizes":true}],"parsedSize":13934,"gzipSize":3694,"inaccurateSizes":true}]}],"parsedSize":13934,"gzipSize":3694},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0},{"label":"plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles","path":"./plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":68,"label":"plugin-emitters\",\"root\":\"window\"}","path":"./plugin-emitters\",\"commonjs2\":\"@tsparticles/plugin-emitters\",\"amd\":\"@tsparticles/plugin-emitters\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.plugin.emitters.shape.canvas":true}}];
       window.entrypoints = ["tsparticles.plugin.emitters.shape.canvas","tsparticles.plugin.emitters.shape.canvas.min"];
       window.defaultSizes = "parsed";
     </script>

package/tsparticles.plugin.emitters.shape.canvas.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
- * v3.0.2
+ * v3.1.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -107,10 +107,15 @@ var plugin_emitters_root_window_ = __webpack_require__(68);
 var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/utils.js
 
+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) {
@@ -122,11 +127,18 @@ 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 {
@@ -148,7 +160,7 @@ function getImageData(src, offset) {
       if (!context) {
         return reject(new Error(`${engine_root_window_.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));
     };
   });
@@ -181,7 +193,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);
   }
@@ -192,10 +204,10 @@ 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;
   }
@@ -205,11 +217,14 @@ function getTextData(textOptions, offset, fill) {
 
 
 
+const maxRetries = 100,
+  half = 0.5;
 class EmittersCanvasShape extends plugin_emitters_root_window_.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_root_window_.isString)(filter)) {
         if (Object.hasOwn(window, filter)) {
@@ -251,8 +266,8 @@ class EmittersCanvasShape extends plugin_emitters_root_window_.EmitterShapeBase
         return;
       }
       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;
       }
@@ -274,12 +289,12 @@ class EmittersCanvasShape extends plugin_emitters_root_window_.EmitterShapeBase
       } = 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
-    };
-    for (let i = 0; i < 100; i++) {
+      scale = this.scale,
+      positionOffset = {
+        x: position.x - width * scale * half,
+        y: position.y - height * scale * half
+      };
+    for (let i = 0; i < maxRetries; i++) {
       const nextIndex = Math.floor((0,engine_root_window_.getRandom)() * width * height),
         pixelPos = {
           x: nextIndex % width,
@@ -290,7 +305,7 @@ class EmittersCanvasShape extends plugin_emitters_root_window_.EmitterShapeBase
       if (!shouldCreateParticle) {
         continue;
       }
-      return {
+      return Promise.resolve({
         position: {
           x: pixelPos.x * scale + positionOffset.x,
           y: pixelPos.y * scale + positionOffset.y
@@ -299,9 +314,9 @@ class EmittersCanvasShape extends plugin_emitters_root_window_.EmitterShapeBase
           ...pixel
         },
         opacity: pixel.a
-      };
+      });
     }
-    return null;
+    return Promise.resolve(null);
   }
   resize(position, size) {
     super.resize(position, size);
@@ -396,9 +411,10 @@ class TextOptions {
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js
 
 
+const minAlpha = 0;
 class EmittersCanvasShapeOptions {
   constructor() {
-    this.filter = pixel => pixel.a > 0;
+    this.filter = pixel => pixel.a > minAlpha;
     this.pixels = new PixelsOptions();
     this.scale = 1;
     this.selector = "";
@@ -441,7 +457,7 @@ class EmittersCanvasShapeGenerator {
 
 async function loadEmittersShapeCanvas(engine, refresh = true) {
   const emittersEngine = engine;
-  emittersEngine.addEmitterShapeGenerator && emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator());
+  emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
   await emittersEngine.refresh(refresh);
 }
 })();

package/tsparticles.plugin.emitters.shape.canvas.min.js

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

package/tsparticles.plugin.emitters.shape.canvas.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Emitters Shape Canvas Plugin v3.0.2 by Matteo Bruni */
+/*! tsParticles Emitters Shape Canvas Plugin v3.1.0 by Matteo Bruni */

package/types/types.d.ts

@@ -1,12 +1,12 @@
 import type { IRgba } from "@tsparticles/engine";
-export type CanvasPixelData = {
+export interface CanvasPixelData {
     height: number;
     pixels: IRgba[][];
     width: number;
-};
-export type TextLineData = {
+}
+export interface TextLineData {
     height: number;
     measure: TextMetrics;
     text: string;
     width: number;
-};
+}

package/types/utils.d.ts

@@ -1,5 +1,5 @@
 import type { CanvasPixelData } from "./types.js";
-import type { IDimension } from "@tsparticles/engine";
+import { type IDimension } from "@tsparticles/engine";
 import type { TextOptions } from "./Options/Classes/TextOptions.js";
 export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
 export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;

package/umd/EmittersCanvasShape.js

@@ -13,11 +13,12 @@
     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)) {
@@ -56,8 +57,8 @@
                 }
                 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;
                 }
@@ -73,12 +74,11 @@
             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),
@@ -86,16 +86,16 @@
                 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/umd/Options/Classes/EmittersCanvasShapeOptions.js

@@ -12,9 +12,10 @@
     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/umd/index.js

@@ -13,8 +13,7 @@
     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());
+        emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator_js_1.EmittersCanvasShapeGenerator());
         await emittersEngine.refresh(refresh);
     }
     exports.loadEmittersShapeCanvas = loadEmittersShapeCanvas;

package/umd/utils.js

@@ -11,10 +11,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) {
@@ -25,11 +29,17 @@
             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 {
@@ -52,7 +62,7 @@
                 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));
             };
         });
@@ -75,7 +85,7 @@
                 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);
         }
@@ -86,11 +96,11 @@
             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;
         }