Image Arrow Flight Filter Effect Tool

function processImage(originalImg, angleDegrees = 0, strength = 10, spacing = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Process parameters: convert to numbers, apply constraints
    const angleValue = Number(angleDegrees);
    // Strength should be an integer, at least 1.
    let strengthValue = Math.round(Number(strength)); 
    if (strengthValue <= 0) {
        strengthValue = 1;
    }
    const spacingValue = Number(spacing);

    // If strength is 1 (so only one copy) or spacing is effectively zero (all copies at the same place),
    // the effect is just the original image.
    // Draw the original image onto the canvas and return.
    if (strengthValue === 1 || spacingValue === 0) {
        canvas.width = imgWidth;
        canvas.height = imgHeight;
        // Only attempt to draw if image has non-zero dimensions
        if (imgWidth > 0 && imgHeight > 0) {
            ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        }
        return canvas;
    }

    const radians = angleValue * Math.PI / 180;
    const cosRad = Math.cos(radians);
    const sinRad = Math.sin(radians);

    // Calculate the bounding box of all drawn instances to set canvas size.
    // Initialize with the dimensions and position of the first instance (i=0, which has offset=0).
    let minX = 0;
    let maxX = imgWidth; // If imgWidth is 0, this will be 0.
    let minY = 0;
    let maxY = imgHeight; // If imgHeight is 0, this will be 0.

    // The loop calculates offsets for 'strengthValue' number of image copies.
    // Copy 0 is at (0,0) relative to its own conceptual coordinate system.
    // Copy 1 is at (1 * spacingValue * cosRad, 1 * spacingValue * sinRad)
    // ...
    // Copy (strengthValue - 1) is at ((strengthValue-1) * spacingValue * cosRad, (strengthValue-1) * spacingValue * sinRad)
    for (let i = 0; i < strengthValue; i++) {
        const currentOffsetX = i * spacingValue * cosRad;
        const currentOffsetY = i * spacingValue * sinRad;

        // Update overall min/max X and Y coordinates reached by any part of any image copy
        minX = Math.min(minX, currentOffsetX);
        maxX = Math.max(maxX, currentOffsetX + imgWidth);
        minY = Math.min(minY, currentOffsetY);
        maxY = Math.max(maxY, currentOffsetY + imgHeight);
    }
    
    // Set canvas dimensions. Use Math.ceil to ensure the entire blurred image fits.
    // If imgWidth/imgHeight are 0, minX/maxX might define a non-zero width/height if spacingValue > 0.
    // E.g., line of 0-width images.
    canvas.width = Math.ceil(maxX - minX);
    canvas.height = Math.ceil(maxY - minY);

    // If the calculated canvas dimensions are zero (e.g., if originalImg was 0x0 and spacingValue was 0),
    // return the empty (0x0) canvas.
    if (canvas.width === 0 || canvas.height === 0) {
        return canvas;
    }
    
    // Set globalAlpha for blending the image copies. 
    // This needs to be done after canvas dimensions are set, as setting dimensions resets canvas context properties.
    ctx.globalAlpha = 1.0 / strengthValue;

    // Draw the originalImg multiple times, each offset appropriately.
    // The drawing coordinates are translated so that (minX, minY) in the conceptual
    // infinite plane (where all image copies are laid out) corresponds to (0,0) on the canvas.
    for (let i = 0; i < strengthValue; i++) {
        const currentOffsetX = i * spacingValue * cosRad;
        const currentOffsetY = i * spacingValue * sinRad;
        
        // Calculate the actual drawing position on the canvas for the top-left of the current image copy
        const drawX = currentOffsetX - minX;
        const drawY = currentOffsetY - minY;
        
        // Only draw if original image has dimensions.
        // drawImage with 0 width/height is a NOP or error depending on browser,
        // but check on canvas.width/height should mostly cover this.
        if (imgWidth > 0 && imgHeight > 0) {
            ctx.drawImage(originalImg, drawX, drawY, imgWidth, imgHeight);
        }
    }
    
    // Reset globalAlpha to default (optional, as canvas is local and returned).
    // ctx.globalAlpha = 1.0; 

    return canvas;
}