@tsparticles/plugin-canvas-mask 3.0.3 → 3.2.0

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

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.plugin.canvas-mask.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function s(t){var o=i[t];if(void 0!==o)return o.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,s),n.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{loadCanvasMaskPlugin:()=>p});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}var e=s(533);class i{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,e.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const i=window[t.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class n{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class r{constructor(){this.family="sans-serif",this.size=100}load(t){t&&(void 0!==t.family&&(this.family=t.family),void 0!==t.size&&(this.size=t.size),void 0!==t.style&&(this.style=t.style),void 0!==t.variant&&(this.variant=t.variant),void 0!==t.weight&&(this.weight=t.weight))}}class a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class l{constructor(){this.color="#000000",this.font=new r,this.lines=new a,this.text=""}load(t){t&&(void 0!==t.color&&(this.color=t.color),this.font.load(t.font),this.lines.load(t.lines),void 0!==t.text&&(this.text=t.text))}}class c{constructor(){this.enable=!1,this.override=new t,this.pixels=new i,this.position={x:50,y:50},this.scale=1}load(t){t&&(void 0!==t.element&&t.element instanceof HTMLCanvasElement&&(this.element=t.element),void 0!==t.enable&&(this.enable=t.enable),t.image&&(this.image||(this.image=new n),this.image.load(t.image)),this.pixels.load(t.pixels),t.position&&(this.position={x:t.position.x??this.position.x,y:t.position.y??this.position.y}),this.override.load(t.override),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),t.text&&(this.text||(this.text=new l),this.text.load(t.text)))}}function h(t,i,s,o,n,r){const{height:a,width:l}=i,c=a*l,h=function(t){for(let i=t.length-1;i>=0;i--){const s=Math.floor((0,e.getRandom)()*i);[t[i],t[s]]=[t[s],t[i]]}return t}(f(c)),d=Math.min(c,t.actualOptions.particles.number.value),u=t.canvas.size;let g=0;const p=u.width*s.x/100-l*o/2,x=u.height*s.y/100-a*o/2;for(;g<d&&h.length;){const e=h.pop()||0,s={x:e%l,y:Math.floor(e/l)},a=i.pixels[s.y][s.x];if(!r(a))continue;const c={x:s.x*o+p,y:s.y*o+x},d={};n.color&&(d.color={value:a}),n.opacity&&(d.opacity={value:a.a}),t.particles.addParticle(c,d),g++}}function d(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 n=[];for(let t=0;t<o.length;t+=i){const s=t/i,r={x:s%e.width,y:Math.floor(s/e.width)};n[r.y]||(n[r.y]=[]),n[r.y][r.x]={r:o[t],g:o[t+1],b:o[t+2],a:o[t+3]/255}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const f=t=>[...Array(t).keys()];class u{constructor(t,e){this._container=t,this._engine=e}async init(){const t=this._container,i=t.actualOptions.canvasMask;if(!i?.enable)return;let s={pixels:[],height:0,width:0};const o=i.pixels.offset;if(i.image){const t=i.image.src;if(!t)return;s=await function(t,i){const s=new Image;s.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{s.onerror=o,s.onload=()=>{const n=document.createElement("canvas");n.width=s.width,n.height=s.height;const r=n.getContext("2d");if(!r)return o(new Error(`${e.errorPrefix} Could not get canvas context`));r.drawImage(s,0,0,s.width,s.height,0,0,n.width,n.height),t(d(r,n,i))}}));return s.src=t,o}(t,o)}else if(i.text){const t=function(t,i){const s=document.createElement("canvas"),o=s.getContext("2d"),{font:n,text:r,lines:a,color:l}=t;if(!r||!o)return;const c=r.split(a.separator),h=(0,e.isNumber)(n.size)?`${n.size}px`:n.size,f=[];let u=0,g=0;for(const t of c){o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`;const e=o.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+a.spacing,f.push(i)}s.width=u,s.height=g;let p=0;for(const t of f)o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`,o.fillStyle=l,o.fillText(t.text,0,p+t.measure.actualBoundingBoxAscent),p+=t.height+a.spacing;return d(o,s,i)}(i.text,o);if(!t)return;s=t}else if(i.element||i.selector){const t=i.element||i.selector&&document.querySelector(i.selector);if(!t)return;const e=t.getContext("2d");if(!e)return;s=d(e,t,o)}h(t,s,i.position,i.scale,i.override,i.pixels.filter)}}class g{constructor(t){this.id="canvasMask",this._engine=t}getPlugin(t){return new u(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new c),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function p(t,e=!0){await t.addPlugin(new g(t),e)}})(),o})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(e=>(()=>{var t,r,n={533:t=>{t.exports=e}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,i),r.exports}i.m=n,i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>e+".min.js",i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="@tsparticles/plugin-canvas-mask:",i.l=(e,n,o,a)=>{if(t[e])t[e].push(n);else{var s,l;if(void 0!==o)for(var c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var p=c[u];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==r+o){s=p;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",r+o),s.src=e),t[e]=[n];var d=(r,n)=>{s.onerror=s.onload=null,clearTimeout(f);var o=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),o&&o.forEach((e=>e(n))),r)return r(n)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),l&&document.head.appendChild(s)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&!e;)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={592:0};i.f.j=(t,r)=>{var n=i.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var o=new Promise(((r,o)=>n=e[t]=[r,o]));r.push(n[2]=o);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var o=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",s.name="ChunkLoadError",s.type=o,s.request=a,n[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,o,a=r[0],s=r[1],l=r[2],c=0;if(a.some((t=>0!==e[t]))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(l)l(i)}for(t&&t(r);c<a.length;c++)o=a[c],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var a={};return(()=>{async function e(e,t=!0){const{CanvasMaskPlugin:r}=await i.e(262).then(i.bind(i,262));await e.addPlugin(new r,t)}i.r(a),i.d(a,{loadCanvasMaskPlugin:()=>e})})(),a})()));

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

@@ -1 +1 @@
-/*! tsParticles Canvas Mask Plugin v3.0.3 by Matteo Bruni */
+/*! tsParticles Canvas Mask Plugin v3.2.0 by Matteo Bruni */

package/types/CanvasMaskInstance.d.ts

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

package/types/CanvasMaskPlugin.d.ts

@@ -0,0 +1,10 @@
+import type { CanvasMaskOptions, ICanvasMaskOptions } from "./types.js";
+import { type Container, type IPlugin, type RecursivePartial } from "@tsparticles/engine";
+import type { CanvasMaskInstance } from "./CanvasMaskInstance.js";
+export declare class CanvasMaskPlugin implements IPlugin {
+    readonly id: string;
+    constructor();
+    getPlugin(container: Container): Promise<CanvasMaskInstance>;
+    loadOptions(options: CanvasMaskOptions, source?: RecursivePartial<ICanvasMaskOptions>): void;
+    needsPlugin(options?: RecursivePartial<ICanvasMaskOptions>): boolean;
+}

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

@@ -1,4 +1,4 @@
-import type { IOptionLoader, IRgba, RecursivePartial } from "@tsparticles/engine";
+import { type IOptionLoader, type IRgba, type RecursivePartial } from "@tsparticles/engine";
 import type { ICanvasMaskPixels } from "../Interfaces/ICanvasMaskPixels.js";
 export declare class CanvasMaskPixels implements ICanvasMaskPixels, IOptionLoader<ICanvasMaskPixels> {
     filter: (pixel: IRgba) => boolean;

package/types/utils.d.ts

@@ -1,12 +1,12 @@
 import { type Container, type ICoordinates, type IDimension, type IRgba } from "@tsparticles/engine";
 import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride.js";
 import type { TextMask } from "./Options/Classes/TextMask.js";
-export type CanvasPixelData = {
+export interface CanvasPixelData {
     height: number;
     pixels: IRgba[][];
     width: number;
-};
-export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): void;
+}
+export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): Promise<void>;
 export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
 export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;
 export declare function getTextData(textOptions: TextMask, offset: number): CanvasPixelData | undefined;

package/umd/CanvasMaskInstance.js

@@ -12,9 +12,8 @@
     exports.CanvasMaskInstance = void 0;
     const utils_js_1 = require("./utils.js");
     class CanvasMaskInstance {
-        constructor(container, engine) {
+        constructor(container) {
             this._container = container;
-            this._engine = engine;
         }
         async init() {
             const container = this._container, options = container.actualOptions.canvasMask;
@@ -42,8 +41,8 @@
                 }
                 pixelData = data;
             }
-            else if (options.element || options.selector) {
-                const canvas = options.element || (options.selector && document.querySelector(options.selector));
+            else if (options.element ?? options.selector) {
+                const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
                 if (!canvas) {
                     return;
                 }
@@ -53,7 +52,7 @@
                 }
                 pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
             }
-            (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+            await (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
         }
     }
     exports.CanvasMaskInstance = CanvasMaskInstance;

package/umd/CanvasMaskPlugin.js

@@ -0,0 +1,61 @@
+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;
+};
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./Options/Classes/CanvasMask.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CanvasMaskPlugin = void 0;
+    const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
+    class CanvasMaskPlugin {
+        constructor() {
+            this.id = "canvasMask";
+        }
+        async getPlugin(container) {
+            const { CanvasMaskInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskInstance.js"], resolve_1, reject_1); }).then(__importStar));
+            return new CanvasMaskInstance(container);
+        }
+        loadOptions(options, source) {
+            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+                return;
+            }
+            let canvasMaskOptions = options.canvasMask;
+            if (canvasMaskOptions?.load === undefined) {
+                options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
+            }
+            canvasMaskOptions.load(source?.canvasMask);
+        }
+        needsPlugin(options) {
+            return options?.canvasMask?.enable ?? false;
+        }
+    }
+    exports.CanvasMaskPlugin = CanvasMaskPlugin;
+});

package/umd/Options/Classes/CanvasMaskPixels.js

@@ -11,9 +11,10 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CanvasMaskPixels = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const minAlpha = 0;
     class CanvasMaskPixels {
         constructor() {
-            this.filter = (pixel) => pixel.a > 0;
+            this.filter = (pixel) => pixel.a > minAlpha;
             this.offset = 4;
         }
         load(data) {

package/umd/index.js

@@ -1,41 +1,42 @@
+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;
+};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Options/Classes/CanvasMask.js", "./CanvasMaskInstance.js"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadCanvasMaskPlugin = void 0;
-    const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
-    const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
-    class CanvasMaskPlugin {
-        constructor(engine) {
-            this.id = "canvasMask";
-            this._engine = engine;
-        }
-        getPlugin(container) {
-            return new CanvasMaskInstance_js_1.CanvasMaskInstance(container, this._engine);
-        }
-        loadOptions(options, source) {
-            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-                return;
-            }
-            let canvasMaskOptions = options.canvasMask;
-            if (canvasMaskOptions?.load === undefined) {
-                options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
-            }
-            canvasMaskOptions.load(source?.canvasMask);
-        }
-        needsPlugin(options) {
-            return options?.canvasMask?.enable ?? false;
-        }
-    }
     async function loadCanvasMaskPlugin(engine, refresh = true) {
-        await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
+        const { CanvasMaskPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskPlugin.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskPlugin.js"], resolve_1, reject_1); }).then(__importStar));
+        await engine.addPlugin(new CanvasMaskPlugin(), refresh);
     }
     exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
 });

package/umd/utils.js

@@ -11,15 +11,19 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getTextData = exports.getImageData = exports.getCanvasImageData = exports.addParticlesFromCanvasPixels = void 0;
     const engine_1 = require("@tsparticles/engine");
-    function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+    const half = 0.5, origin = {
+        x: 0,
+        y: 0,
+    }, defaultWidth = 0;
+    async function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
         const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
         let selectedPixels = 0;
         const positionOffset = {
-            x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
-            y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+            x: (canvasSize.width * position.x) / engine_1.percentDenominator - width * scale * half,
+            y: (canvasSize.height * position.y) / engine_1.percentDenominator - height * scale * half,
         };
         while (selectedPixels < maxParticles && indexArray.length) {
-            const nextIndex = indexArray.pop() || 0, pixelPos = {
+            const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
             }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
@@ -40,15 +44,15 @@
                     value: pixel.a,
                 };
             }
-            container.particles.addParticle(pos, pOptions);
+            await container.particles.addParticle(pos, pOptions);
             selectedPixels++;
         }
     }
     exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
     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) {
@@ -59,11 +63,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 {
@@ -86,7 +96,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));
             };
         });
@@ -102,14 +112,14 @@
         const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${font.size}px` : font.size, linesData = [];
         let maxWidth = 0, totalHeight = 0;
         for (const line of lines) {
-            context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
             const measure = context.measureText(line), lineData = {
                 measure,
                 text: line,
                 height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
                 width: measure.width,
             };
-            maxWidth = Math.max(maxWidth || 0, lineData.width);
+            maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);
             totalHeight += lineData.height + linesOptions.spacing;
             linesData.push(lineData);
         }
@@ -117,16 +127,17 @@
         canvas.height = totalHeight;
         let currentHeight = 0;
         for (const line of linesData) {
-            context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
             context.fillStyle = color;
-            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
             currentHeight += line.height + linesOptions.spacing;
         }
         return getCanvasImageData(context, canvas, offset);
     }
     exports.getTextData = getTextData;
     function shuffle(array) {
-        for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+        const lengthOffset = 1, minIndex = 0;
+        for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
             const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex);
             [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
         }