Image Multi-Effects Tool

/**
 * Applies multiple graphical effects to an image using the Canvas API.
 * This function leverages the `CanvasRenderingContext2D.filter` property, which
 * works similarly to the CSS `filter` property, to efficiently apply a stack of effects.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} [brightness=100] Adjusts the brightness. 100 is original, 0 is black, >100 is brighter.
 * @param {number} [contrast=100] Adjusts the contrast. 100 is original, 0 is gray, >100 is higher contrast.
 * @param {number} [saturate=100] Adjusts the color saturation. 100 is original, 0 is grayscale.
 * @param {number} [grayscale=0] Converts the image to grayscale. 0 is original, 100 is fully grayscale.
 * @param {number} [sepia=0] Applies a sepia tone. 0 is original, 100 is full sepia.
 * @param {number} [invert=0] Inverts the colors. 0 is original, 100 is fully inverted.
 * @param {number} [blur=0] Applies a Gaussian blur. Value is the blur radius in pixels.
 * @param {number} [hueRotate=0] Rotates the hues of the colors. Value is in degrees (0-360).
 * @param {number} [opacity=100] Adjusts the opacity. 100 is fully opaque, 0 is fully transparent.
 * @returns {HTMLCanvasElement} A new canvas element with the processed image.
 */
function processImage(originalImg, brightness = 100, contrast = 100, saturate = 100, grayscale = 0, sepia = 0, invert = 0, blur = 0, hueRotate = 0, opacity = 100) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Build the filter string based on the provided parameters
    const filters = [];
    if (brightness !== 100) filters.push(`brightness(${brightness}%)`);
    if (contrast !== 100) filters.push(`contrast(${contrast}%)`);
    if (saturate !== 100) filters.push(`saturate(${saturate}%)`);
    if (grayscale !== 0) filters.push(`grayscale(${grayscale}%)`);
    if (sepia !== 0) filters.push(`sepia(${sepia}%)`);
    if (invert !== 0) filters.push(`invert(${invert}%)`);
    if (blur !== 0) filters.push(`blur(${blur}px)`);
    if (hueRotate !== 0) filters.push(`hue-rotate(${hueRotate}deg)`);
    if (opacity !== 100) filters.push(`opacity(${opacity}%)`);

    // Apply the combined filter string to the canvas context
    if (filters.length > 0) {
        ctx.filter = filters.join(' ');
    }

    // Draw the original image onto the canvas. The filters will be applied
    // during this drawing operation.
    ctx.drawImage(originalImg, 0, 0);

    // Return the new canvas with the applied effects
    return canvas;
}