@tsparticles/engine/esm/Utils/CanvasUtils.js

Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

import { defaultZoom, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
export function paintBase(context, dimension, baseColor) {
    context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
    context.fillRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
}
export function paintImage(context, dimension, image, opacity) {
    if (!image) {
        return;
    }
    const prevAlpha = context.globalAlpha;
    context.globalAlpha = opacity;
    context.drawImage(image, originPoint.x, originPoint.y, dimension.width, dimension.height);
    context.globalAlpha = prevAlpha;
}
export function clear(context, dimension) {
    context.clearRect(originPoint.x, originPoint.y, dimension.width, dimension.height);
}
export function drawParticle(data) {
    const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = defaultZoom, drawPosition = {
        x: pos.x,
        y: pos.y,
    };
    context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
    if (colorStyles.fill) {
        context.fillStyle = colorStyles.fill;
    }
    const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? minStrokeWidth;
    context.lineWidth = strokeWidth;
    if (colorStyles.stroke) {
        context.strokeStyle = colorStyles.stroke;
    }
    const drawData = {
        context,
        particle,
        radius,
        drawRadius: radius * drawScale,
        opacity,
        delta,
        pixelRatio: container.retina.pixelRatio,
        fill: fillEnabled,
        stroke: strokeWidth > minStrokeWidth,
        transformData,
        position: { ...pos },
        drawPosition,
        drawScale,
    };
    for (const plugin of container.plugins) {
        plugin.drawParticleTransform?.(drawData);
    }
    const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
    drawBeforeEffect(effect, drawData);
    drawShapeBeforeDraw(shape, drawData);
    drawShape(shape, drawData);
    drawShapeAfterDraw(shape, drawData);
    drawAfterEffect(effect, drawData);
    context.resetTransform();
}
export function drawAfterEffect(drawer, data) {
    if (!drawer?.drawAfter) {
        return;
    }
    const { particle } = data;
    if (!particle.effect) {
        return;
    }
    drawer.drawAfter(data);
}
export function drawBeforeEffect(drawer, data) {
    if (!drawer?.drawBefore) {
        return;
    }
    const { particle } = data;
    if (!particle.effect) {
        return;
    }
    drawer.drawBefore(data);
}
export function drawShape(drawer, data) {
    if (!drawer) {
        return;
    }
    const { context, fill, particle, stroke } = data;
    if (!particle.shape) {
        return;
    }
    context.beginPath();
    drawer.draw(data);
    if (particle.shapeClose) {
        context.closePath();
    }
    if (fill) {
        context.fill();
    }
    if (stroke) {
        context.stroke();
    }
}
export function drawShapeAfterDraw(drawer, data) {
    if (!drawer?.afterDraw) {
        return;
    }
    const { particle } = data;
    if (!particle.shape) {
        return;
    }
    drawer.afterDraw(data);
}
export function drawShapeBeforeDraw(drawer, data) {
    if (!drawer?.beforeDraw) {
        return;
    }
    const { particle } = data;
    if (!particle.shape) {
        return;
    }
    drawer.beforeDraw(data);
}
export function drawParticlePlugin(context, plugin, particle, delta) {
    if (!plugin.drawParticle) {
        return;
    }
    plugin.drawParticle(context, particle, delta);
}