Image Paw Print Filter Effect Tool

function processImage(originalImg, pawColor = "rgba(0, 0, 0, 0.7)", pawSize = 50, pawDensity = 0.1, pawRotationRange = 30) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (!imgWidth || !imgHeight || imgWidth <= 0 || imgHeight <= 0) {
        // Return an empty canvas if image dimensions are invalid
        canvas.width = 0;
        canvas.height = 0;
        console.error("Image Paw Print Filter: Invalid image dimensions provided.");
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Validate and adjust parameters
    const minPawSize = 10; // Smallest allowed paw size in pixels
    const actualPawSize = Math.max(minPawSize, pawSize);
    // Clamp density: 0 (no paws) to 1 (high density)
    const actualDensity = Math.max(0, Math.min(1, pawDensity)); 
    // Rotation range in degrees, ensure it's positive
    const actualRotationRange = Math.abs(pawRotationRange); 

    // Parse pawColor string for multiple colors (comma-separated)
    let colorPalette;
    const trimmedPawColor = pawColor.trim();

    if (trimmedPawColor.length === 0) {
        // Fallback if pawColor was an empty string or only whitespace
        colorPalette = ["rgba(0, 0, 0, 0.7)"]; // Default color
    } else if (trimmedPawColor.includes(',')) {
        const parsedColors = trimmedPawColor.split(',')
            .map(c => c.trim())
            .filter(c => c.length > 0);
        
        if (parsedColors.length > 0) {
            colorPalette = parsedColors;
        } else {
            // Fallback if input was e.g. ",," or only empty strings after split
            colorPalette = ["rgba(0, 0, 0, 0.7)"]; // Default color
        }
    } else {
        // Single color provided
        colorPalette = [trimmedPawColor];
    }
    
    // Calculate number of paws
    // Avoid division by zero if actualPawSize is 0 (though minPawSize check prevents this for positive sizes)
    const numPaws = actualPawSize > 0 ? 
        Math.floor((imgWidth * imgHeight) / (actualPawSize * actualPawSize) * actualDensity) : 
        0;

    // Helper function to draw a single paw print
    // The (cx, cy) is the conceptual center of the paw print.
    // `size` is the characteristic dimension of the paw.
    // `rotationDegrees` is the rotation of the paw around its center.
    function drawPaw(context, cx, cy, size, color, rotationDegrees) {
        context.save();
        context.translate(cx, cy); // Move origin to paw's center
        context.rotate(rotationDegrees * Math.PI / 180); // Rotate paw
        context.fillStyle = color;

        // Main Pad (the larger, bottom part of the paw print)
        // Drawn as an ellipse.
        // Positioned slightly below the rotated origin (0,0) to balance with toes.
        // X-center: 0 (relative to translated and rotated origin)
        // Y-center: size * 0.05 (shifts it slightly "downwards" in the paw's coordinate system)
        // Radius X: size * 0.28 (width of the main pad)
        // Radius Y: size * 0.20 (height of the main pad)
        context.beginPath();
        context.ellipse(0, size * 0.05, size * 0.28, size * 0.20, 0, 0, 2 * Math.PI);
        context.fill();

        // Toe Pads (the four smaller PADS at the "top" of the paw print)
        // Drawn as circles. Coordinates are relative to the paw's rotated origin.
        // Negative Y values position them "above" the main pad.
        const toeData = [
            { x: -size * 0.22, y: -size * 0.20, r: size * 0.09 },  // Outer left toe
            { x: -size * 0.07, y: -size * 0.25, r: size * 0.10 },  // Inner left toe (slightly higher)
            { x:  size * 0.07, y: -size * 0.25, r: size * 0.10 },  // Inner right toe (slightly higher)
            { x:  size * 0.22, y: -size * 0.20, r: size * 0.09 }   // Outer right toe
        ];

        for (const toe of toeData) {
            context.beginPath();
            context.arc(toe.x, toe.y, toe.r, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
            context.fill();
        }

        context.restore(); // Restore context to state before this paw was drawn
    }

    // Draw the calculated number of paws randomly on the image
    for (let i = 0; i < numPaws; i++) {
        // Random position for the paw's center
        const x = Math.random() * imgWidth;
        const y = Math.random() * imgHeight;

        // Random rotation within the specified range
        // (Math.random() * 2 - 1) gives a random number between -1 and 1
        const rotation = (Math.random() * 2 - 1) * actualRotationRange; 
        
        // Pick a random color from the palette
        const selectedColor = colorPalette[Math.floor(Math.random() * colorPalette.length)];

        drawPaw(ctx, x, y, actualPawSize, selectedColor, rotation);
    }

    return canvas;
}