@tsparticles/plugin-canvas-mask
Version:
tsParticles canvas mask plugin
228 lines (191 loc) • 29.1 kB
JavaScript
/*!
* Author : Matteo Bruni
* MIT license: https://opensource.org/licenses/MIT
* Demo / Generator : https://particles.js.org/
* GitHub : https://www.github.com/matteobruni/tsparticles
* How to use? : Check the GitHub README
* v3.9.1
*/
/*
* 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/).
*/
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@tsparticles/engine"));
else if(typeof define === 'function' && define.amd)
define(["@tsparticles/engine"], factory);
else {
var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./dist/browser/CanvasMaskInstance.js":
/*!********************************************!*\
!*** ./dist/browser/CanvasMaskInstance.js ***!
\********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CanvasMaskInstance: () => (/* binding */ CanvasMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass CanvasMaskInstance {\n constructor(container) {\n this._container = container;\n }\n async init() {\n const container = this._container,\n options = container.actualOptions.canvasMask;\n if (!options?.enable) {\n return;\n }\n let pixelData = {\n pixels: [],\n height: 0,\n width: 0\n };\n const offset = options.pixels.offset;\n if (options.image) {\n const url = options.image.src;\n if (!url) {\n return;\n }\n pixelData = await (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getImageData)(url, offset);\n } else if (options.text) {\n const textOptions = options.text;\n const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getTextData)(textOptions, offset);\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n return;\n }\n pixelData = data;\n } else if (options.element ?? options.selector) {\n const canvas = options.element ?? (options.selector && document.querySelector(options.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_0__.getCanvasImageData)(context, canvas, offset);\n }\n (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskInstance.js?\n}");
/***/ }),
/***/ "./dist/browser/CanvasMaskPlugin.js":
/*!******************************************!*\
!*** ./dist/browser/CanvasMaskPlugin.js ***!
\******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CanvasMaskPlugin: () => (/* binding */ CanvasMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/CanvasMask.js */ \"./dist/browser/Options/Classes/CanvasMask.js\");\n/* harmony import */ var _CanvasMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskInstance.js */ \"./dist/browser/CanvasMaskInstance.js\");\n\n\nclass CanvasMaskPlugin {\n constructor() {\n this.id = \"canvasMask\";\n }\n getPlugin(container) {\n return Promise.resolve(new _CanvasMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskInstance(container));\n }\n loadOptions(options, source) {\n if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n return;\n }\n let canvasMaskOptions = options.canvasMask;\n if (canvasMaskOptions?.load === undefined) {\n options.canvasMask = canvasMaskOptions = new _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__.CanvasMask();\n }\n canvasMaskOptions.load(source?.canvasMask);\n }\n needsPlugin(options) {\n return options?.canvasMask?.enable ?? false;\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskPlugin.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/CanvasMask.js":
/*!****************************************************!*\
!*** ./dist/browser/Options/Classes/CanvasMask.js ***!
\****************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CanvasMask: () => (/* binding */ CanvasMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskOverride.js */ \"./dist/browser/Options/Classes/CanvasMaskOverride.js\");\n/* harmony import */ var _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CanvasMaskPixels.js */ \"./dist/browser/Options/Classes/CanvasMaskPixels.js\");\n/* harmony import */ var _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ImageMask.js */ \"./dist/browser/Options/Classes/ImageMask.js\");\n/* harmony import */ var _TextMask_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TextMask.js */ \"./dist/browser/Options/Classes/TextMask.js\");\n\n\n\n\n\nclass CanvasMask {\n constructor() {\n this.enable = false;\n this.override = new _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskOverride();\n this.pixels = new _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__.CanvasMaskPixels();\n this.position = {\n x: 50,\n y: 50\n };\n this.scale = 1;\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {\n this.element = data.element;\n }\n if (data.enable !== undefined) {\n this.enable = data.enable;\n }\n if (data.image) {\n if (!this.image) {\n this.image = new _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__.ImageMask();\n }\n this.image.load(data.image);\n }\n this.pixels.load(data.pixels);\n if (data.position) {\n this.position = {\n x: data.position.x ?? this.position.x,\n y: data.position.y ?? this.position.y\n };\n }\n this.override.load(data.override);\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.text) {\n if (!this.text) {\n this.text = new _TextMask_js__WEBPACK_IMPORTED_MODULE_4__.TextMask();\n }\n this.text.load(data.text);\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMask.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/CanvasMaskOverride.js":
/*!************************************************************!*\
!*** ./dist/browser/Options/Classes/CanvasMaskOverride.js ***!
\************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CanvasMaskOverride: () => (/* binding */ CanvasMaskOverride)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass CanvasMaskOverride {\n constructor() {\n this.color = true;\n this.opacity = false;\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 if (data.opacity !== undefined) {\n this.opacity = data.opacity;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskOverride.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/CanvasMaskPixels.js":
/*!**********************************************************!*\
!*** ./dist/browser/Options/Classes/CanvasMaskPixels.js ***!
\**********************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ CanvasMaskPixels: () => (/* binding */ CanvasMaskPixels)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst minAlpha = 0;\nclass CanvasMaskPixels {\n constructor() {\n this.filter = pixel => pixel.a > minAlpha;\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.filter !== undefined) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.filter)) {\n if (Object.hasOwn(window, data.filter)) {\n const filter = window[data.filter];\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(filter)) {\n this.filter = filter;\n }\n }\n } else {\n this.filter = data.filter;\n }\n }\n if (data.offset !== undefined) {\n this.offset = data.offset;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskPixels.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/FontTextMask.js":
/*!******************************************************!*\
!*** ./dist/browser/Options/Classes/FontTextMask.js ***!
\******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ FontTextMask: () => (/* binding */ FontTextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass FontTextMask {\n constructor() {\n this.family = \"sans-serif\";\n this.size = 100;\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-canvas-mask/./dist/browser/Options/Classes/FontTextMask.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/ImageMask.js":
/*!***************************************************!*\
!*** ./dist/browser/Options/Classes/ImageMask.js ***!
\***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ImageMask: () => (/* binding */ ImageMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass ImageMask {\n constructor() {\n this.src = \"\";\n }\n load(data) {\n if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n return;\n }\n if (data.src !== undefined) {\n this.src = data.src;\n }\n }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/ImageMask.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/TextMask.js":
/*!**************************************************!*\
!*** ./dist/browser/Options/Classes/TextMask.js ***!
\**************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TextMask: () => (/* binding */ TextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FontTextMask.js */ \"./dist/browser/Options/Classes/FontTextMask.js\");\n/* harmony import */ var _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextMaskLine.js */ \"./dist/browser/Options/Classes/TextMaskLine.js\");\n\n\n\nclass TextMask {\n constructor() {\n this.color = \"#000000\";\n this.font = new _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__.FontTextMask();\n this.lines = new _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__.TextMaskLine();\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-canvas-mask/./dist/browser/Options/Classes/TextMask.js?\n}");
/***/ }),
/***/ "./dist/browser/Options/Classes/TextMaskLine.js":
/*!******************************************************!*\
!*** ./dist/browser/Options/Classes/TextMaskLine.js ***!
\******************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ TextMaskLine: () => (/* binding */ TextMaskLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nclass TextMaskLine {\n constructor() {\n this.separator = \"\\n\";\n this.spacing = 10;\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-canvas-mask/./dist/browser/Options/Classes/TextMaskLine.js?\n}");
/***/ }),
/***/ "./dist/browser/index.js":
/*!*******************************!*\
!*** ./dist/browser/index.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadCanvasMaskPlugin: () => (/* binding */ loadCanvasMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _CanvasMaskPlugin_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CanvasMaskPlugin.js */ \"./dist/browser/CanvasMaskPlugin.js\");\n\nasync function loadCanvasMaskPlugin(engine, refresh = true) {\n engine.checkVersion(\"3.9.1\");\n await engine.addPlugin(new _CanvasMaskPlugin_js__WEBPACK_IMPORTED_MODULE_0__.CanvasMaskPlugin(), refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/index.js?\n}");
/***/ }),
/***/ "./dist/browser/utils.js":
/*!*******************************!*\
!*** ./dist/browser/utils.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ addParticlesFromCanvasPixels: () => (/* binding */ addParticlesFromCanvasPixels),\n/* harmony export */ getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */ getImageData: () => (/* binding */ getImageData),\n/* harmony export */ getTextData: () => (/* binding */ getTextData)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\n\nconst half = 0.5,\n origin = {\n x: 0,\n y: 0\n },\n defaultWidth = 0;\nfunction addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {\n const {\n height,\n width\n } = data,\n numPixels = height * width,\n indexArray = shuffle(range(numPixels)),\n maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value),\n canvasSize = container.canvas.size;\n let selectedPixels = 0;\n const positionOffset = {\n x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - width * scale * half,\n y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - height * scale * half\n };\n while (selectedPixels < maxParticles && indexArray.length) {\n const defaultIndex = 0,\n nextIndex = indexArray.pop() ?? defaultIndex,\n pixelPos = {\n x: nextIndex % width,\n y: Math.floor(nextIndex / width)\n },\n pixel = data.pixels[pixelPos.y][pixelPos.x],\n shouldCreateParticle = filter(pixel);\n if (!shouldCreateParticle) {\n continue;\n }\n const pos = {\n x: pixelPos.x * scale + positionOffset.x,\n y: pixelPos.y * scale + positionOffset.y\n },\n pOptions = {};\n if (override.color) {\n pOptions.color = {\n value: pixel\n };\n }\n if (override.opacity) {\n pOptions.opacity = {\n value: pixel.a\n };\n }\n container.particles.addParticle(pos, pOptions);\n selectedPixels++;\n }\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;\n if (clear) {\n ctx.clearRect(origin.x, origin.y, size.width, size.height);\n }\n const pixels = [];\n for (let i = 0; i < imageData.length; i += offset) {\n const idx = i / offset,\n pos = {\n x: idx % size.width,\n y: Math.floor(idx / size.width)\n };\n if (!pixels[pos.y]) {\n pixels[pos.y] = [];\n }\n const indexesOffset = {\n r: 0,\n g: 1,\n b: 2,\n a: 3\n },\n alphaFactor = 255;\n pixels[pos.y][pos.x] = {\n r: imageData[i + indexesOffset.r],\n g: imageData[i + indexesOffset.g],\n b: imageData[i + indexesOffset.b],\n a: imageData[i + indexesOffset.a] / alphaFactor\n };\n }\n return {\n pixels,\n width: Math.min(...pixels.map(row => row.length)),\n height: pixels.length\n };\n}\nfunction getImageData(src, offset) {\n const image = new Image();\n image.crossOrigin = \"Anonymous\";\n const p = new Promise((resolve, reject) => {\n image.onerror = reject;\n image.onload = () => {\n const canvas = document.createElement(\"canvas\");\n canvas.width = image.width;\n canvas.height = image.height;\n const context = canvas.getContext(\"2d\");\n if (!context) {\n return reject(new Error(`${_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} Could not get canvas context`));\n }\n context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);\n resolve(getCanvasImageData(context, canvas, offset));\n };\n });\n image.src = src;\n return p;\n}\nfunction getTextData(textOptions, offset) {\n const canvas = document.createElement(\"canvas\"),\n context = canvas.getContext(\"2d\"),\n {\n font,\n text,\n lines: linesOptions,\n color\n } = textOptions;\n if (!text || !context) {\n return;\n }\n const lines = text.split(linesOptions.separator),\n fontSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(font.size) ? `${font.size}px` : font.size,\n linesData = [];\n let maxWidth = 0,\n totalHeight = 0;\n for (const line of lines) {\n context.font = `${font.style ?? \"\"} ${font.variant ?? \"\"} ${font.weight ?? \"\"} ${fontSize} ${font.family}`;\n const measure = context.measureText(line),\n lineData = {\n measure,\n text: line,\n height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,\n width: measure.width\n };\n maxWidth = Math.max(maxWidth || defaultWidth, 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 context.fillStyle = color;\n context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n currentHeight += line.height + linesOptions.spacing;\n }\n return getCanvasImageData(context, canvas, offset);\n}\nfunction shuffle(array) {\n const lengthOffset = 1,\n minIndex = 0;\n for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {\n const randomIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * currentIndex);\n [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];\n }\n return array;\n}\nconst range = n => [...Array(n).keys()];\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/utils.js?\n}");
/***/ }),
/***/ "@tsparticles/engine":
/*!*********************************************************************************************************************************!*\
!*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
\*********************************************************************************************************************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./dist/browser/index.js");
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});