@tsparticles/plugin-canvas-mask/cjs/CanvasMaskPluginInstance.js

tsParticles canvas mask plugin

import { getCanvasImageData, getImageData, getTextData } from "@tsparticles/canvas-utils";
import { isNull, safeDocument } from "@tsparticles/engine";
import { addParticlesFromCanvasPixels } from "./utils.js";
export class CanvasMaskPluginInstance {
    #container;
    constructor(container) {
        this.#container = container;
    }
    async init() {
        const container = this.#container, options = container.actualOptions.canvasMask;
        if (!options?.enable) {
            return;
        }
        let pixelData = {
            pixels: [],
            height: 0,
            width: 0,
        };
        const offset = options.pixels.offset;
        if (options.image) {
            const url = options.image.src;
            if (!url) {
                return;
            }
            pixelData = await getImageData(url, offset, container.canvas.render.settings);
        }
        else if (options.text) {
            const textOptions = options.text, data = getTextData(textOptions, offset, textOptions.fill, container.canvas.render.settings);
            if (isNull(data)) {
                return;
            }
            pixelData = data;
        }
        else if (options.element ?? options.selector) {
            const canvas = options.element ?? (options.selector && safeDocument().querySelector(options.selector));
            if (!canvas) {
                return;
            }
            const context = canvas.getContext("2d", container.canvas.render.settings);
            if (!context) {
                return;
            }
            pixelData = getCanvasImageData(context, canvas, offset);
        }
        addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
    }
}