Image Path Blur Filter Tool

async function processImage(originalImg, angleDegrees = 0, distance = 10, samples = 5) {
    // 1. Parameter validation and adjustment
    // angleDegrees: Default is 0. If provided, convert to number. If NaN, use default 0.
    angleDegrees = Number(angleDegrees);
    if (Number.isNaN(angleDegrees)) {
        angleDegrees = 0; // Default if NaN
    }

    // distance: Default is 10. If provided, convert to number. If NaN, use default 10. Must be non-negative.
    distance = Number(distance);
    if (Number.isNaN(distance)) {
        distance = 10; // Default if NaN
    }
    distance = Math.max(0, distance); 

    // samples: Default is 5. If provided, convert to number. If NaN, use default 5. Must be an integer >= 1.
    samples = Number(samples);
    if (Number.isNaN(samples)) {
        samples = 5; // Default if NaN
    }
    samples = Math.max(1, Math.floor(samples));

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

    // Create output canvas
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const ctx = outputCanvas.getContext('2d');

    // If width or height is 0, or distance is 0, no processing needed, return empty/original drawn canvas.
    if (width === 0 || height === 0) {
        // For a 0-size canvas, there's nothing to draw or process.
        return outputCanvas;
    }

    // Draw original image to an intermediate canvas to get its pixel data.
    // This is a standard way to handle various image sources (<img>, <canvas>, <video>)
    // and ensure we are working with raster data.
    const inputCanvas = document.createElement('canvas');
    inputCanvas.width = width;
    inputCanvas.height = height;
    const inputCtx = inputCanvas.getContext('2d');
    inputCtx.drawImage(originalImg, 0, 0, width, height);

    // If distance is 0, the blur has no effect. Return the original image drawn on the output canvas.
    // The main loop would also yield the original image, but this is a quick optimization.
    if (distance === 0) {
        ctx.drawImage(originalImg, 0, 0, width, height);
        return outputCanvas;
    }
    
    // Get pixel data from the input canvas
    const inputData = inputCtx.getImageData(0, 0, width, height);
    // Create ImageData for the output canvas. This is preferred over `new ImageData()`.
    const outputData = ctx.createImageData(width, height);

    const pixels = inputData.data;     // Source pixel data array
    const outPixels = outputData.data; // Destination pixel data array

    const angleRad = angleDegrees * Math.PI / 180;
    const dirX = Math.cos(angleRad);
    // Canvas Y-coordinates increase downwards. Standard angle math works fine where
    // positive sin typically means upwards in math, but downwards in canvas pixel Y.
    const dirY = Math.sin(angleRad); 

    // Iterate over each pixel of the destination image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let totalR = 0, totalG = 0, totalB = 0, totalA = 0;

            // Sum samples along the blur path
            for (let s = 0; s < samples; s++) {
                // Calculate displacement for this sample.
                // 't' ranges from -0.5 to +0.5 to center the samples around the current pixel (x,y).
                //   If samples = 1, t = 0 (sample current pixel, resulting in no blur).
                //   If samples = 2, t = -0.5, 0.5 (sample at -0.5*distance and +0.5*distance).
                //   If samples = 3, t = -0.5, 0, 0.5.
                const t = (samples === 1) ? 0 : (s / (samples - 1)) - 0.5;
                
                const offsetX = t * distance * dirX;
                const offsetY = t * distance * dirY;

                // Calculate coordinates of the source pixel to sample. Round to nearest integer pixel.
                const sampleX = Math.round(x + offsetX);
                const sampleY = Math.round(y + offsetY);

                // Clamp coordinates to be within image bounds to avoid reading outside the array.
                const sx = Math.max(0, Math.min(width - 1, sampleX));
                const sy = Math.max(0, Math.min(height - 1, sampleY));

                // Get the RGBA components of the sample pixel.
                // Each pixel in ImageData.data is 4 bytes (R, G, B, A).
                const R_idx = (sy * width + sx) * 4;
                totalR += pixels[R_idx];
                totalG += pixels[R_idx + 1];
                totalB += pixels[R_idx + 2];
                totalA += pixels[R_idx + 3];
            }

            // Calculate the average color for the current output pixel (x,y).
            const baseIdx = (y * width + x) * 4; // Index for the current pixel in the output data array.
            outPixels[baseIdx]     = totalR / samples;
            outPixels[baseIdx + 1] = totalG / samples;
            outPixels[baseIdx + 2] = totalB / samples;
            outPixels[baseIdx + 3] = totalA / samples;
        }
    }

    // Put the modified pixel data onto the output canvas.
    ctx.putImageData(outputData, 0, 0);
    return outputCanvas;
}