Image Rain Effect Creator

function processImage(originalImg, raindropCount = 500, raindropLength = 20, raindropWidth = 1, raindropSpeed = 5, raindropColor = "rgba(255, 255, 255, 0.6)", wind = 1) {
    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;

    // Array to store the raindrop objects
    let raindrops = [];

    /**
     * Creates a single raindrop object with randomized properties.
     * @returns {{x: number, y: number, length: number, speed: number, width: number}}
     */
    function createRaindrop() {
        return {
            // Spawn raindrops horizontally across a wider area than the canvas to account for wind
            x: Math.random() * (canvas.width + 200) - 100,
            // Spawn raindrops above the canvas view
            y: Math.random() * -canvas.height,
            // Randomize properties for a more natural effect
            length: raindropLength * (0.7 + Math.random() * 0.6),
            speed: raindropSpeed * (0.8 + Math.random() * 0.4),
            width: raindropWidth * (0.5 + Math.random() * 0.5)
        };
    }

    // Initialize the raindrops array
    for (let i = 0; i < raindropCount; i++) {
        const drop = createRaindrop();
        // For the initial setup, spread the raindrops across the entire canvas height
        drop.y = Math.random() * canvas.height;
        raindrops.push(drop);
    }

    /**
     * The main animation loop.
     */
    function animate() {
        // Draw the original image as the background for each frame
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

        // Set the visual style for the raindrops
        ctx.strokeStyle = raindropColor;
        ctx.lineCap = 'round'; // Makes the ends of the rain streaks rounded

        // Iterate through each raindrop to update and draw it
        for (let i = 0; i < raindrops.length; i++) {
            let drop = raindrops[i];

            ctx.lineWidth = drop.width;

            // Draw the raindrop streak
            ctx.beginPath();
            ctx.moveTo(drop.x, drop.y);
            // The line's end point is offset by the wind parameter, creating a slant
            ctx.lineTo(drop.x + wind, drop.y + drop.length);
            ctx.stroke();

            // Update the raindrop's position for the next frame
            // Vertical movement is based on speed
            drop.y += drop.speed;
            // Horizontal movement is based on the wind, normalized by length to maintain angle
            drop.x += (wind * drop.speed) / drop.length;

            // Check if the raindrop has moved off the bottom of the canvas
            if (drop.y > canvas.height) {
                // Reset the raindrop's properties and position it back above the canvas
                Object.assign(drop, createRaindrop());
                drop.y = Math.random() * -100; // Staggered respawn
            }

            // Check if the raindrop has moved off the sides of the canvas due to wind
            if (wind > 0 && drop.x > canvas.width + 20) {
                drop.x = -20; // Wrap around to the left side
            } else if (wind < 0 && drop.x < -20) {
                drop.x = canvas.width + 20; // Wrap around to the right side
            }
        }

        // Request the next frame of the animation
        requestAnimationFrame(animate);
    }

    // Start the animation
    animate();

    // Return the canvas element. The animation will continue to run on this canvas.
    return canvas;
}