Image Motion Blur Filter Effect Tool

function processImage(originalImg, length = 10, angle = 0, steps = 10) {
    // Parameter parsing and sanitization
    // Default values from function signature are used if arguments are not provided.
    // If an argument is provided (e.g., a user-input string), it needs to be parsed.
    // If parsing results in NaN (e.g., Number("foo")), use the hardcoded default values.
    const defaultParamValues = {
        length: 10,
        angle: 0,
        steps: 10
    };

    let numLength = Number(length);
    if (isNaN(numLength)) {
        numLength = defaultParamValues.length;
    }

    let numAngle = Number(angle);
    if (isNaN(numAngle)) {
        numAngle = defaultParamValues.angle;
    }

    let numStepsArg = Number(steps);
    if (isNaN(numStepsArg)) {
        numStepsArg = defaultParamValues.steps;
    }
    
    // Apply constraints to the parsed numeric values
    const actualLength = Math.max(0, numLength); // Length cannot be negative
    const numPasses = Math.max(1, Math.round(numStepsArg)); // At least 1 pass, integer
    const actualAngle = numAngle; // Angle can be any number

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for pristine dimensions, fallback to width/height
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

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

    // If image has no dimensions, return an empty canvas (it will be 0x0 or blank as per canvas.width/height)
    if (imgWidth === 0 || imgHeight === 0) {
        return canvas;
    }
    
    // If no blur is effectively needed (length is 0 or only 1 pass), draw original and return
    if (actualLength === 0 || numPasses === 1) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        return canvas;
    }

    // Calculate direction vector for the blur
    const rad = actualAngle * Math.PI / 180;
    const dX = Math.cos(rad);
    const dY = Math.sin(rad);

    // Clear the canvas (important for globalAlpha to work correctly over multiple draws)
    // This makes the canvas transparent black by default.
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Set the alpha for each drawing pass. Total opacity sums up.
    ctx.globalAlpha = 1 / numPasses;

    // Draw the image multiple times, offset along the blur angle
    for (let i = 0; i < numPasses; i++) {
        // Calculate 't' from 0 to 1, representing the position of this pass in the blur streak.
        // Since numPasses >= 2 here, numPasses - 1 is >= 1, so no division by zero.
        const t = i / (numPasses - 1);
        
        // Calculate the offset for this specific pass.
        // The blur effect is centered, so offsets range from -actualLength/2 to +actualLength/2.
        const passOffset = (t - 0.5) * actualLength;

        const offsetX = dX * passOffset;
        const offsetY = dY * passOffset;
        
        // Draw the original image at the calculated offset
        ctx.drawImage(originalImg, offsetX, offsetY, imgWidth, imgHeight);
    }

    // Reset globalAlpha to its default value
    ctx.globalAlpha = 1.0;

    return canvas;
}