Image Jail Cell Filter Effect

function processImage(originalImg, barColor = 'black', barThickness = 5, barInterval = 50) {
    // Convert parameters to numbers, as they might be passed as strings from UI.
    const thick = Number(barThickness);
    const interval = Number(barInterval); // Defines the distance from the start of one bar to the start of the next.

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

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

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

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

    // If bar thickness is zero or negative, or image has no dimensions,
    // no bars can be drawn, so return the canvas with just the image.
    if (thick <= 0 || imgWidth <= 0 || imgHeight <= 0) {
        return canvas;
    }

    ctx.fillStyle = barColor;

    // === Draw Vertical Bars ===

    // 1. Draw the first bar at the left edge of the image.
    // The width of this bar is `thick`, but it won't exceed `imgWidth`. Canvas `fillRect` handles this.
    ctx.fillRect(0, 0, thick, imgHeight);
    
    // 2. Draw intermediate vertical bars.
    // These are drawn only if `interval` is a positive value.
    if (interval > 0) {
        // Start drawing subsequent bars from `x = interval`.
        // The loop continues as long as the starting x-coordinate `x`
        // is less than `imgWidth - thick`. This `imgWidth - thick` is the
        // starting position of the rightmost edge bar. This condition prevents
        // intermediate bars from overlapping or replacing the designated final bar.
        for (let x = interval; x < imgWidth - thick; x += interval) {
            ctx.fillRect(x, 0, thick, imgHeight);
        }
    }
    
    // 3. Draw the last bar at the right edge of the image.
    // This bar is drawn if the image width is greater than the bar thickness.
    // If `imgWidth <= thick`, the first bar already covers this area or the entire width.
    if (imgWidth > thick) { 
        ctx.fillRect(imgWidth - thick, 0, thick, imgHeight);
    }

    // === Draw Horizontal Bars ===

    // 1. Draw the first bar at the top edge of the image.
    ctx.fillRect(0, 0, imgWidth, thick);

    // 2. Draw intermediate horizontal bars.
    // Similar logic to vertical bars.
    if (interval > 0) {
        for (let y = interval; y < imgHeight - thick; y += interval) {
            ctx.fillRect(0, y, imgWidth, thick);
        }
    }
    
    // 3. Draw the last bar at the bottom edge of the image.
    // Similar logic to the rightmost vertical bar.
    if (imgHeight > thick) { 
        ctx.fillRect(0, imgHeight - thick, imgWidth, thick);
    }
    
    return canvas;
}