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

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
+ * v4.0.0-alpha.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___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShape: () => (/* binding */ EmittersCanvasShape)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-emitters */ \"@tsparticles/plugin-emitters\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n\n\n\nconst maxRetries = 100,\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 ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isString)(filter)) {\n      if (Object.hasOwn(globalThis, filter)) {\n        const wndFilter = globalThis[filter];\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isFunction)(wndFilter)) {\n          filterFunc = wndFilter;\n        }\n      }\n    } else {\n      filterFunc = filter;\n    }\n    this.filter = filterFunc;\n    this.scale = options.scale;\n    this.pixelData = {\n      pixels: [],\n      height: 0,\n      width: 0\n    };\n  }\n  async init() {\n    let pixelData;\n    const options = this.options,\n      selector = options.selector,\n      pixels = options.pixels,\n      image = options.image,\n      element = options.element,\n      text = options.text,\n      offset = pixels.offset;\n    if (image) {\n      const url = image.src;\n      if (!url) {\n        return;\n      }\n      pixelData = await (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getImageData)(url, offset);\n    } else if (element ?? selector) {\n      const canvas = element ?? (selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().querySelector(selector));\n      if (!canvas) {\n        return;\n      }\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      pixelData = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getCanvasImageData)(context, canvas, offset);\n    } else {\n      const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill);\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n        return;\n      }\n      pixelData = data;\n    }\n    this.pixelData = pixelData;\n  }\n  randomPosition() {\n    const {\n        height,\n        width\n      } = this.pixelData,\n      data = this.pixelData,\n      position = this.position,\n      scale = this.scale,\n      positionOffset = {\n        x: position.x - width * scale * 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        row = data.pixels[pixelPos.y];\n      if (!row) {\n        continue;\n      }\n      const pixel = row[pixelPos.x];\n      if (!pixel) {\n        continue;\n      }\n      const shouldCreateParticle = this.filter(pixel);\n      if (!shouldCreateParticle) {\n        continue;\n      }\n      return {\n        position: {\n          x: pixelPos.x * scale + positionOffset.x,\n          y: pixelPos.y * scale + positionOffset.y\n        },\n        color: {\n          ...pixel\n        },\n        opacity: pixel.a\n      };\n    }\n    return null;\n  }\n  resize(position, size) {\n    super.resize(position, size);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShape.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/EmittersCanvasShapeGenerator.js"
+/*!******************************************************!*\
+  !*** ./dist/browser/EmittersCanvasShapeGenerator.js ***!
+  \******************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShapeGenerator: () => (/* binding */ EmittersCanvasShapeGenerator)\n/* harmony export */ });\n/* harmony import */ var _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EmittersCanvasShape.js */ \"./dist/browser/EmittersCanvasShape.js\");\n/* harmony import */ var _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/EmittersCanvasShapeOptions.js */ \"./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js\");\n\n\nclass EmittersCanvasShapeGenerator {\n  generate(position, size, fill, options) {\n    const shapeOptions = new _Options_Classes_EmittersCanvasShapeOptions_js__WEBPACK_IMPORTED_MODULE_1__.EmittersCanvasShapeOptions();\n    shapeOptions.load(options);\n    return new _EmittersCanvasShape_js__WEBPACK_IMPORTED_MODULE_0__.EmittersCanvasShape(position, size, fill, shapeOptions);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShapeGenerator.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js"
+/*!********************************************************************!*\
+  !*** ./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js ***!
+  \********************************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShapeOptions: () => (/* binding */ EmittersCanvasShapeOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PixelsOptions.js */ \"./dist/browser/Options/Classes/PixelsOptions.js\");\n/* harmony import */ var _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextOptions.js */ \"./dist/browser/Options/Classes/TextOptions.js\");\n\n\n\nconst minAlpha = 0;\nclass EmittersCanvasShapeOptions {\n  constructor() {\n    this.filter = pixel => pixel.a > minAlpha;\n    this.pixels = new _PixelsOptions_js__WEBPACK_IMPORTED_MODULE_1__.PixelsOptions();\n    this.scale = 1;\n    this.selector = \"\";\n    this.text = new _TextOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextOptions();\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.element !== undefined) {\n      this.element = data.element;\n    }\n    if (data.filter !== undefined) {\n      this.filter = data.filter;\n    }\n    this.pixels.load(data.pixels);\n    if (data.scale !== undefined) {\n      this.scale = data.scale;\n    }\n    if (data.selector !== undefined) {\n      this.selector = data.selector;\n    }\n    if (data.image !== undefined) {\n      this.image = data.image;\n    }\n    this.text.load(data.text);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/EmittersCanvasShapeOptions.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/PixelsOptions.js"
+/*!*******************************************************!*\
+  !*** ./dist/browser/Options/Classes/PixelsOptions.js ***!
+  \*******************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PixelsOptions: () => (/* binding */ PixelsOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass PixelsOptions {\n  constructor() {\n    this.offset = 4;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.offset !== undefined) {\n      this.offset = data.offset;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/PixelsOptions.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/TextFontOptions.js"
+/*!*********************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextFontOptions.js ***!
+  \*********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextFontOptions: () => (/* binding */ TextFontOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextFontOptions {\n  constructor() {\n    this.family = \"Verdana\";\n    this.size = 32;\n    this.style = \"\";\n    this.variant = \"\";\n    this.weight = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.family !== undefined) {\n      this.family = data.family;\n    }\n    if (data.size !== undefined) {\n      this.size = data.size;\n    }\n    if (data.style !== undefined) {\n      this.style = data.style;\n    }\n    if (data.variant !== undefined) {\n      this.variant = data.variant;\n    }\n    if (data.weight !== undefined) {\n      this.weight = data.weight;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/TextFontOptions.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/TextLinesOptions.js"
+/*!**********************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextLinesOptions.js ***!
+  \**********************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextLinesOptions: () => (/* binding */ TextLinesOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextLinesOptions {\n  constructor() {\n    this.separator = \"\\n\";\n    this.spacing = 0;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.separator !== undefined) {\n      this.separator = data.separator;\n    }\n    if (data.spacing !== undefined) {\n      this.spacing = data.spacing;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/TextLinesOptions.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/TextOptions.js"
+/*!*****************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextOptions.js ***!
+  \*****************************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TextOptions: () => (/* binding */ TextOptions)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextFontOptions.js */ \"./dist/browser/Options/Classes/TextFontOptions.js\");\n/* harmony import */ var _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextLinesOptions.js */ \"./dist/browser/Options/Classes/TextLinesOptions.js\");\n\n\n\nclass TextOptions {\n  constructor() {\n    this.color = \"#000000\";\n    this.font = new _TextFontOptions_js__WEBPACK_IMPORTED_MODULE_1__.TextFontOptions();\n    this.lines = new _TextLinesOptions_js__WEBPACK_IMPORTED_MODULE_2__.TextLinesOptions();\n    this.text = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    this.font.load(data.font);\n    this.lines.load(data.lines);\n    if (data.text !== undefined) {\n      this.text = data.text;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/Options/Classes/TextOptions.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/utils.js ***!
+  \*******************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */   getImageData: () => (/* binding */ getImageData),\n/* harmony export */   getTextData: () => (/* binding */ getTextData)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst origin = {\n    x: 0,\n    y: 0\n  },\n  minWidth = 0,\n  defaultRgbValue = 0,\n  defaultAlphaValue = 1;\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n  const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;\n  if (clear) {\n    ctx.clearRect(origin.x, origin.y, size.width, size.height);\n  }\n  const pixels = [];\n  for (let i = 0; i < imageData.length; i += offset) {\n    const idx = i / offset,\n      pos = {\n        x: idx % size.width,\n        y: Math.floor(idx / size.width)\n      };\n    pixels[pos.y] ??= [];\n    const indexesOffset = {\n        r: 0,\n        g: 1,\n        b: 2,\n        a: 3\n      },\n      alphaFactor = 255,\n      row = pixels[pos.y];\n    if (!row) {\n      continue;\n    }\n    row[pos.x] = {\n      r: imageData[i + indexesOffset.r] ?? defaultRgbValue,\n      g: imageData[i + indexesOffset.g] ?? defaultRgbValue,\n      b: imageData[i + indexesOffset.b] ?? defaultRgbValue,\n      a: (imageData[i + indexesOffset.a] ?? defaultAlphaValue) / alphaFactor\n    };\n  }\n  return {\n    pixels,\n    width: Math.min(...pixels.map(row => row.length)),\n    height: pixels.length\n  };\n}\nfunction getImageData(src, offset) {\n  const image = new Image();\n  image.crossOrigin = \"Anonymous\";\n  const p = new Promise((resolve, reject) => {\n    image.onerror = reject;\n    image.onload = () => {\n      const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n      canvas.width = image.width;\n      canvas.height = image.height;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        reject(new Error(\"Could not get canvas context\"));\n        return;\n      }\n      context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);\n      resolve(getCanvasImageData(context, canvas, offset));\n    };\n  });\n  image.src = src;\n  return p;\n}\nfunction getTextData(textOptions, offset, fill) {\n  const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\"),\n    context = canvas.getContext(\"2d\"),\n    {\n      font,\n      text,\n      lines: linesOptions,\n      color\n    } = textOptions;\n  if (!text || !context) {\n    return;\n  }\n  const lines = text.split(linesOptions.separator),\n    fontSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(font.size) ? `${font.size.toString()}px` : font.size,\n    linesData = [];\n  let maxWidth = 0,\n    totalHeight = 0;\n  for (const line of lines) {\n    context.font = `${font.style || \"\"} ${font.variant || \"\"} ${font.weight || \"\"} ${fontSize} ${font.family}`;\n    const measure = context.measureText(line),\n      lineData = {\n        measure,\n        text: line,\n        height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,\n        width: measure.width\n      };\n    maxWidth = Math.max(maxWidth || minWidth, lineData.width);\n    totalHeight += lineData.height + linesOptions.spacing;\n    linesData.push(lineData);\n  }\n  canvas.width = maxWidth;\n  canvas.height = totalHeight;\n  let currentHeight = 0;\n  for (const line of linesData) {\n    context.font = `${font.style || \"\"} ${font.variant || \"\"} ${font.weight || \"\"} ${fontSize} ${font.family}`;\n    if (fill) {\n      context.fillStyle = color;\n      context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    } else {\n      context.strokeStyle = color;\n      context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    }\n    currentHeight += line.height + linesOptions.spacing;\n  }\n  return getCanvasImageData(context, canvas, offset);\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/EmittersCanvasShape.js

@@ -1,5 +1,5 @@
 import { EmitterShapeBase } from "@tsparticles/plugin-emitters";
-import { getRandom, isFunction, isNull, isString, } from "@tsparticles/engine";
+import { getRandom, isFunction, isNull, isString, safeDocument, } from "@tsparticles/engine";
 import { getCanvasImageData, getImageData, getTextData } from "./utils.js";
 const maxRetries = 100, half = 0.5;
 export class EmittersCanvasShape extends EmitterShapeBase {
@@ -7,18 +7,16 @@ export class EmittersCanvasShape extends EmitterShapeBase {
         super(position, size, fill, options);
         const filter = options.filter, minAlpha = 0;
         let filterFunc = (pixel) => pixel.a > minAlpha;
-        if (filter !== undefined) {
-            if (isString(filter)) {
-                if (Object.hasOwn(window, filter)) {
-                    const wndFilter = window[filter];
-                    if (isFunction(wndFilter)) {
-                        filterFunc = wndFilter;
-                    }
+        if (isString(filter)) {
+            if (Object.hasOwn(globalThis, filter)) {
+                const wndFilter = globalThis[filter];
+                if (isFunction(wndFilter)) {
+                    filterFunc = wndFilter;
                 }
             }
-            else {
-                filterFunc = filter;
-            }
+        }
+        else {
+            filterFunc = filter;
         }
         this.filter = filterFunc;
         this.scale = options.scale;
@@ -38,15 +36,8 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             }
             pixelData = await getImageData(url, offset);
         }
-        else if (text) {
-            const data = getTextData(text, offset, this.fill);
-            if (isNull(data)) {
-                return;
-            }
-            pixelData = data;
-        }
         else if (element ?? selector) {
-            const canvas = element ?? (selector && document.querySelector(selector));
+            const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
@@ -56,8 +47,12 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
-        if (!pixelData) {
-            return;
+        else {
+            const data = getTextData(text, offset, this.fill);
+            if (isNull(data)) {
+                return;
+            }
+            pixelData = data;
         }
         this.pixelData = pixelData;
     }
@@ -70,7 +65,15 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             const nextIndex = Math.floor(getRandom() * width * height), pixelPos = {
                 x: nextIndex % width,
                 y: Math.floor(nextIndex / width),
-            }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = this.filter(pixel);
+            }, row = data.pixels[pixelPos.y];
+            if (!row) {
+                continue;
+            }
+            const pixel = row[pixelPos.x];
+            if (!pixel) {
+                continue;
+            }
+            const shouldCreateParticle = this.filter(pixel);
             if (!shouldCreateParticle) {
                 continue;
             }

package/esm/index.js

@@ -1,7 +1,7 @@
-import { EmittersCanvasShapeGenerator } from "./EmittersCanvasShapeGenerator.js";
-export async function loadEmittersShapeCanvas(engine, refresh = true) {
-    const emittersEngine = engine;
-    emittersEngine.checkVersion("3.9.0");
-    emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
-    await emittersEngine.refresh(refresh);
+export function loadEmittersShapeCanvas(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(async (emittersEngine) => {
+        const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
+        emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
+    });
 }

package/esm/utils.js

@@ -1,8 +1,8 @@
-import { errorPrefix, isNumber } from "@tsparticles/engine";
+import { isNumber, safeDocument } from "@tsparticles/engine";
 const origin = {
     x: 0,
     y: 0,
-}, minWidth = 0;
+}, minWidth = 0, defaultRgbValue = 0, defaultAlphaValue = 1;
 export function getCanvasImageData(ctx, size, offset, clear = true) {
     const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
@@ -14,20 +14,21 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             x: idx % size.width,
             y: Math.floor(idx / size.width),
         };
-        if (!pixels[pos.y]) {
-            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 + indexesOffset.r],
-            g: imageData[i + indexesOffset.g],
-            b: imageData[i + indexesOffset.b],
-            a: imageData[i + indexesOffset.a] / alphaFactor,
+        }, alphaFactor = 255, row = pixels[pos.y];
+        if (!row) {
+            continue;
+        }
+        row[pos.x] = {
+            r: imageData[i + indexesOffset.r] ?? defaultRgbValue,
+            g: imageData[i + indexesOffset.g] ?? defaultRgbValue,
+            b: imageData[i + indexesOffset.b] ?? defaultRgbValue,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlphaValue) / alphaFactor,
         };
     }
     return {
@@ -42,12 +43,13 @@ export function getImageData(src, offset) {
     const p = new Promise((resolve, reject) => {
         image.onerror = reject;
         image.onload = () => {
-            const canvas = document.createElement("canvas");
+            const canvas = safeDocument().createElement("canvas");
             canvas.width = image.width;
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error(`${errorPrefix} Could not get canvas context`));
+                reject(new Error("Could not get canvas context"));
+                return;
             }
             context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
@@ -57,11 +59,11 @@ export function getImageData(src, offset) {
     return p;
 }
 export function getTextData(textOptions, offset, fill) {
-    const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+    const canvas = safeDocument().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
     if (!text || !context) {
         return;
     }
-    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size}px` : font.size, linesData = [];
+    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size.toString()}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}`;

package/package.json

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