Image Ghost Effect Tool

/**
 * Applies a "ghost" effect to an image by overlaying multiple semi-transparent,
 * tinted, and randomly offset copies of the original image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [layers=6] The number of ghost layers to generate behind the main image.
 * @param {number} [offset=15] The maximum pixel offset for each ghost layer from the center.
 * @param {number} [opacity=0.2] The opacity of each individual ghost layer.
 * @param {string} [color='#00eeee'] The color to tint the ghost layers (CSS color string).
 * @param {number} [mainImageOpacity=0.9] The opacity of the main, central image.
 * @returns {HTMLCanvasElement} A canvas element displaying the image with the ghost effect.
 */
function processImage(originalImg, layers = 6, offset = 15, opacity = 0.2, color = '#00eeee', mainImageOpacity = 0.9) {
    // Coerce parameters to numbers to handle potential string inputs
    const numLayers = Number(layers);
    const numOffset = Number(offset);
    const numOpacity = Number(opacity);
    const numMainImageOpacity = Number(mainImageOpacity);

    // Get the intrinsic dimensions of the image
    const {
        naturalWidth: width,
        naturalHeight: height
    } = originalImg;

    // Create the main canvas for the final output
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Create an off-screen canvas to prepare the tinted "ghost" version of the image
    const tintCanvas = document.createElement('canvas');
    tintCanvas.width = width;
    tintCanvas.height = height;
    const tintCtx = tintCanvas.getContext('2d');

    // Step 1: Fill the tint canvas with the desired solid color.
    // This will serve as the base for hue and saturation.
    tintCtx.fillStyle = color;
    tintCtx.fillRect(0, 0, width, height);

    // Step 2: Set the composite operation to 'luminosity'.
    // This mode preserves the hue and saturation of the destination (the color)
    // while adopting the luminosity (brightness/detail) of the source (the image).
    tintCtx.globalCompositeOperation = 'luminosity';

    // Step 3: Draw the original image on top. This applies its details to the color.
    tintCtx.drawImage(originalImg, 0, 0);

    // The 'tintCanvas' now holds a version of the image colorized with the tint color.

    // --- Start drawing the final effect on the main canvas ---

    // Draw the semi-transparent, tinted ghost layers
    ctx.globalAlpha = numOpacity;
    for (let i = 0; i < numLayers; i++) {
        // Calculate a random offset for a more spectral, chaotic feel
        const xOffset = (Math.random() - 0.5) * 2 * numOffset;
        const yOffset = (Math.random() - 0.5) * 2 * numOffset;
        ctx.drawImage(tintCanvas, xOffset, yOffset);
    }

    // Draw the main, original image on top of the ghost layers
    ctx.globalAlpha = numMainImageOpacity;
    ctx.drawImage(originalImg, 0, 0);

    // Reset canvas context properties for good practice
    ctx.globalAlpha = 1.0;

    return canvas;
}