Image Color Filter Adder With Gradient Customization

function processImage(originalImg, gradientColors = '#1C0405,#50070A,#A82127', blendMode = 'overlay', angle = 45) {
    // Create a new canvas element to work on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions from the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas size to match the image
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas as the base layer
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Parse the gradientColors string into an array of color strings
    // trim() handles spaces, filter(Boolean) removes empty strings from trailing commas
    const colors = gradientColors.split(',').map(c => c.trim()).filter(Boolean);

    // If no valid colors are provided, we can't create a gradient,
    // so we return the canvas with just the original image.
    if (colors.length === 0) {
        return canvas;
    }

    // ---- Calculate Coordinates for the Linear Gradient ----
    // This calculation ensures the gradient line is angled correctly
    // and is long enough to cover the entire canvas from corner to corner.
    const angleInRadians = angle * (Math.PI / 180);
    const cosAngle = Math.cos(angleInRadians);
    const sinAngle = Math.sin(angleInRadians);
    
    // Calculate the length of the diagonal projection of the canvas onto the gradient's angle
    const lineLength = Math.abs(width * cosAngle) + Math.abs(height * sinAngle);

    // Calculate the starting (x0, y0) and ending (x1, y1) points of the gradient line.
    // This centers the gradient line over the canvas.
    const x0 = (width - lineLength * cosAngle) / 2;
    const y0 = (height - lineLength * sinAngle) / 2;
    const x1 = (width + lineLength * cosAngle) / 2;
    const y1 = (height + lineLength * sinAngle) / 2;

    // Create the linear gradient object using the calculated coordinates
    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);

    // Add color stops to the gradient, distributing them evenly along its length
    if (colors.length === 1) {
        // If only one color is provided, create a solid color fill
        gradient.addColorStop(0, colors[0]);
        gradient.addColorStop(1, colors[0]);
    } else {
        colors.forEach((color, index) => {
            const position = index / (colors.length - 1);
            gradient.addColorStop(position, color);
        });
    }

    // ---- Apply the Gradient as a Filter ----
    
    // A list of valid blend modes supported by the Canvas 2D API
    const validBlendModes = [
        "source-over", "source-in", "source-out", "source-atop", "destination-over", 
        "destination-in", "destination-out", "destination-atop", "lighter", "copy", 
        "xor", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", 
        "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", 
        "saturation", "color", "luminosity"
    ];
    
    // Set the global composite operation, which determines how new shapes are drawn onto existing ones.
    // Fallback to a safe default ('overlay') if an invalid mode is provided.
    ctx.globalCompositeOperation = validBlendModes.includes(blendMode) ? blendMode : 'overlay';

    // Set the fill style to the gradient we created
    ctx.fillStyle = gradient;

    // Draw a rectangle covering the entire canvas. Because of the blend mode, this will
    // apply the gradient as a color filter over the original image.
    ctx.fillRect(0, 0, width, height);
    
    // It's good practice to reset the composite operation to its default value
    ctx.globalCompositeOperation = 'source-over';

    // Return the final canvas element
    return canvas;
}