Image Scanlines Filter

function processImage(originalImg, lineColor = "rgba(0, 0, 0, 0.3)", scanlineThickness = 1, gapThickness = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

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

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

    // Convert parameters to numbers and validate them
    let sThick = Number(scanlineThickness);
    let gThick = Number(gapThickness);

    // Validate scanlineThickness: must be a positive number.
    // If not, no scanlines can be meaningfully drawn, so return the canvas with the original image.
    if (isNaN(sThick) || sThick <= 0) {
        return canvas;
    }

    // Validate gapThickness: must be a non-negative number.
    // If it's invalid (NaN) or negative, default it to 0 (no gap).
    if (isNaN(gThick) || gThick < 0) {
        gThick = 0;
    }

    // At this point:
    // sThick is a positive number (scanline has thickness).
    // gThick is a non-negative number (gap has non-negative thickness).

    const step = sThick + gThick;
    // Since sThick > 0 and gThick >= 0, step will always be > 0.
    // This prevents potential infinite loops in the drawing stage.

    // Set the fill style for the scanlines
    ctx.fillStyle = lineColor;

    // Draw the scanlines
    for (let y = 0; y < imgHeight; y += step) {
        // Draw a rectangle for each scanline
        // The rectangle starts at current y, spans the full image width,
        // and has height equal to scanlineThickness.
        ctx.fillRect(0, y, imgWidth, sThick);
    }

    return canvas;
}