Image Nth Line Eraser

/**
 * Erases every nth line of an image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} n The interval of lines to erase. For example, n=2 erases every 2nd line, n=3 erases every 3rd, etc. Must be a positive integer.
 * @returns {HTMLCanvasElement} A new canvas element with every nth line of the image erased (made transparent).
 */
function processImage(originalImg, n = 2) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions from the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas dimensions to match the image
    canvas.width = width;
    canvas.height = height;

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

    // Sanitize the 'n' parameter to ensure it's a positive integer
    const lineInterval = Math.floor(n);

    // If n is less than or equal to 1, there's nothing to process or the whole image is erased.
    // If n=1, erase the whole image. For n<=0, it's invalid, so we return the original.
    if (lineInterval <= 0) {
        console.error("The line interval 'n' must be a positive number.");
        return canvas; // Return the original image drawn on the canvas
    }
    if (lineInterval === 1) {
        ctx.clearRect(0, 0, width, height);
        return canvas; // Return a blank canvas
    }

    // Get the pixel data of the entire canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Iterate over each row of pixels
    for (let y = 0; y < height; y++) {
        // Check if the current row is an "nth" row (e.g., if n=3, check rows 2, 5, 8...)
        // We use (y + 1) because y is 0-indexed.
        if ((y + 1) % lineInterval === 0) {
            // If it is, iterate over each pixel in that row
            for (let x = 0; x < width; x++) {
                // Calculate the index of the pixel's alpha component in the data array.
                // Each pixel is represented by 4 values (R, G, B, A).
                const alphaIndex = (y * width + x) * 4 + 3;
                // Set the alpha value to 0 to make the pixel fully transparent.
                data[alphaIndex] = 0;
            }
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas with the modified image
    return canvas;
}