Image Rain Drop Enhancement Tool

function processImage(originalImg, dropCount = 500, streakCount = 70, darkness = 0.5, maxDropSize = 2, maxStreakLength = 60) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    // --- Step 1: Draw the original image ---
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // --- Step 2: Darken the image ---
    // This simulates the darker, overcast lighting typical of rainy weather.
    const validDarkness = Math.max(0, Math.min(1, darkness));
    if (validDarkness > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${validDarkness})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    
    // Define a cool, bluish-white color for the rain elements
    const rainColor = '230, 230, 250';

    // --- Step 3: Add static raindrops ---
    // These represent small drops on the "camera lens" or static in the air.
    for (let i = 0; i < dropCount; i++) {
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * maxDropSize;
        // Drops have varying opacity to look more natural
        const opacity = Math.random() * 0.5 + 0.2; // Opacity from 0.2 to 0.7

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(${rainColor}, ${opacity})`;
        ctx.fill();
    }

    // --- Step 4: Add falling rain streaks ---
    // These simulate the motion blur of falling rain.
    const streakAngle = Math.PI / 18; // ~10 degrees from vertical, for a slight slant

    for (let i = 0; i < streakCount; i++) {
        // Start position can be slightly off-canvas to make rain appear to enter the frame
        const x1 = Math.random() * canvas.width * 1.5 - canvas.width * 0.25;
        const y1 = Math.random() * canvas.height * 1.2 - canvas.height * 0.2;

        const length = (Math.random() * 0.7 + 0.3) * maxStreakLength + 15; // Min length of 15
        
        // Calculate the end point of the streak based on the angle and length
        const x2 = x1 + Math.sin(streakAngle) * length;
        const y2 = y1 + Math.cos(streakAngle) * length;
        
        const opacity = Math.random() * 0.3 + 0.15; // Streaks are more transparent (0.15 to 0.45)
        const lineWidth = Math.random() * 1.5 + 0.5; // Line width from 0.5px to 2px

        // Use a gradient for the streak to give it a fading effect
        const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
        gradient.addColorStop(0, `rgba(${rainColor}, ${opacity})`);
        gradient.addColorStop(0.5, `rgba(${rainColor}, ${opacity * 0.7})`);
        gradient.addColorStop(1, `rgba(${rainColor}, 0)`);
        
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = gradient;
        ctx.stroke();
    }

    // Return the final canvas element
    return canvas;
}