Image Comet Tail Filter Effect Tool

async function processImage(originalImg, tailLength = 10, angle = 45, opacityFactor = 0.9) {
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    const canvas = document.createElement('canvas');
    
    if (width === 0 || height === 0) {
        // Handle cases where the image might not have dimensions (e.g., not loaded yet or invalid)
        // Return an empty or minimal canvas.
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero dimensions. Returning empty canvas.");
        return canvas;
    }
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Validate and sanitize parameters
    tailLength = Math.max(1, Math.round(Number(tailLength))); // Ensure integer >= 1
    angle = Number(angle); // Ensure it's a number
    opacityFactor = Math.max(0.0, Math.min(1.0, Number(opacityFactor))); // Ensure 0.0 <= factor <= 1.0

    const radians = angle * (Math.PI / 180);
    const dirX = Math.cos(radians);
    const dirY = Math.sin(radians);

    // The effect is created by drawing the original image multiple times,
    // each time shifted slightly in the tail's direction and with decreasing opacity.
    // To ensure correct layering with 'source-over' blending (default),
    // we draw the furthest, faintest parts of the tail first, then layer
    // closer, brighter parts on top, ending with the main image (k=0).

    for (let k = tailLength - 1; k >= 0; k--) {
        // Calculate opacity for the current segment of the tail
        // k=0 is the main image (full opacity, unless opacityFactor is manipulative)
        // k=1 is the first segment of the tail, k=2 is the second, etc.
        // The Math.pow(opacityFactor, k) means:
        // - If opacityFactor = 0.9:
        //   k=0 (main image, drawn last, on top): 0.9^0 = 1.0 opacity
        //   k=1 (first tail segment): 0.9^1 = 0.9 opacity
        //   k=2 (second tail segment): 0.9^2 = 0.81 opacity
        //   ...
        // This makes the tail fade out progressively.
        const currentOpacity = Math.pow(opacityFactor, k);
        
        // Calculate the shift for this segment
        // The k=0 segment (main image) will have zero shift.
        // Subsequent segments are shifted further along the tail direction.
        const shiftX = k * dirX;
        const shiftY = k * dirY;

        ctx.globalAlpha = currentOpacity;
        
        // Draw the original image at the shifted position.
        // The canvas dimensions are set to the image's dimensions,
        // so drawing originalImg at (shiftX, shiftY) uses its natural size.
        ctx.drawImage(originalImg, shiftX, shiftY);
    }
    
    // Reset globalAlpha to default in case the context is used further,
    // though for this function, we are returning the canvas itself.
    ctx.globalAlpha = 1.0;

    return canvas;
}