Image Prison Bar Filter Effect

function processImage(originalImg, barColor = 'black', barWidth = 10, spacing = 10, orientation = 'vertical') {
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth/Height for intrinsic image dimensions.
    // Fallback to width/height if naturalWidth/Height are not available (e.g., image not fully loaded or not an HTMLImageElement).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero (e.g., image not loaded or invalid), return an empty canvas.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;
    const ctx = canvas.getContext('2d');

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

    // Parse numeric parameters. User might pass strings like "10".
    const numBarWidth = Number(barWidth);
    let numSpacing = Number(spacing); // This might be adjusted if invalid.

    // Validate barWidth: If it's not a positive number (e.g., NaN, 0, or negative),
    // meaningful bars cannot be drawn. In this case, return the canvas with only the original image.
    if (isNaN(numBarWidth) || numBarWidth <= 0) {
        return canvas;
    }

    // Validate spacing: If it's not a non-negative number (e.g., NaN or negative),
    // treat it as 0 (meaning bars are adjacent with no visible image strip between them).
    if (isNaN(numSpacing) || numSpacing < 0) {
        numSpacing = 0;
    }

    // Set the fill color for the bars.
    ctx.fillStyle = barColor;

    // Calculate the period of the bar pattern. This is the width of one bar plus one space.
    // The loop will advance by this amount in each iteration.
    const period = numBarWidth + numSpacing;

    // Given that numBarWidth must be > 0 (due to the check above) and numSpacing >= 0,
    // the 'period' will always be positive. This ensures the loop drawing bars progresses
    // and doesn't become infinite.

    // Draw the bars based on the specified orientation.
    if (orientation.toLowerCase() === 'horizontal') {
        // Draw horizontal bars
        for (let y = 0; y < imgHeight; y += period) {
            ctx.fillRect(0, y, imgWidth, numBarWidth);
        }
    } else {
        // Default to vertical bars (this includes any orientation string other than 'horizontal')
        for (let x = 0; x < imgWidth; x += period) {
            ctx.fillRect(x, 0, numBarWidth, imgHeight);
        }
    }

    return canvas;
}