Image Motion Blur Filter

function processImage(originalImg, blurAmount = 10, angle = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Ensure parameters are numbers. String inputs (e.g., from HTML forms) are common.
    const numericBlurAmount = Number(blurAmount);
    const numericAngle = Number(angle);

    // If blurAmount is 0 or less, no blur is applied.
    // Draw the original image onto the canvas and return it immediately.
    if (numericBlurAmount <= 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        return canvas;
    }

    // Convert angle from degrees to radians for trigonometric functions
    const rad = numericAngle * Math.PI / 180;

    // Calculate directional vector components (dx, dy).
    // Math.cos and Math.sin with radians produce components of a unit vector.
    const dx = Math.cos(rad);
    const dy = Math.sin(rad);

    // Number of rendering passes (steps) for the blur effect.
    // A fixed number of steps offers a balance between perceived smoothness and performance.
    // More steps could provide a smoother blur but would be more computationally expensive.
    // 15 steps is a common choice for a good enough quality vs. performance trade-off.
    const numSteps = 15;

    // Set global alpha for blending. Each pass contributes a fraction of the final color.
    // (1.0 / numSteps) means each of the numSteps images contributes equally to the average.
    ctx.globalAlpha = 1.0 / numSteps;

    // Draw the image multiple times, offset along the motion vector.
    // The blur is "centered", meaning displacement occurs from -blurAmount/2 to +blurAmount/2
    // relative to the image's original position. This keeps the perceived center of the blurred object stationary.
    for (let i = 0; i < numSteps; i++) {
        // Calculate 't' as a parameter from 0 (for the first step) to 1 (for the last step).
        // If numSteps were 1 (which is not the case here as it's fixed at 15),
        // 't' would be 0.5 to ensure the single draw happens at the center (zero offset).
        const t = (numSteps === 1) ? 0.5 : i / (numSteps - 1);
        
        // 'currentDisplacement' is the magnitude of displacement for the current step along the motion vector.
        // It ranges from -numericBlurAmount / 2 (when t=0) to +numericBlurAmount / 2 (when t=1).
        const currentDisplacement = (t - 0.5) * numericBlurAmount;
        
        const offsetX = currentDisplacement * dx;
        const offsetY = currentDisplacement * dy;
        
        // Draw the image at the calculated offset.
        // The source image (originalImg) is drawn onto the canvas at (offsetX, offsetY)
        // with dimensions (imgWidth, imgHeight), so it's not scaled, only translated.
        // Browsers handle sub-pixel rendering for (offsetX, offsetY), which contributes to a smooth blur.
        ctx.drawImage(originalImg, offsetX, offsetY, imgWidth, imgHeight);
    }

    // Reset globalAlpha to its default value (1.0) for good practice.
    // While it doesn't affect this function's output as the canvas context is local to this call,
    // it's a clean way to leave the context state.
    ctx.globalAlpha = 1.0;

    return canvas;
}