Image Line Eraser With Thickness And Direction Options

/**
 * Erases horizontal or vertical lines from an image.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} [thickness=2] The thickness in pixels of the lines to be erased. Must be 1 or greater.
 * @param {number} [linesToKeep=5] The number of pixel lines to keep between each erased line.
 * @param {string} [direction='horizontal'] The direction of the lines to erase. Accepts 'horizontal' or 'vertical'.
 * @returns {HTMLCanvasElement} A new canvas element with the lines erased.
 */
function processImage(originalImg, thickness = 2, linesToKeep = 5, direction = 'horizontal') {
    // Sanitize inputs
    const safeThickness = Math.max(1, Math.floor(thickness));
    const safeLinesToKeep = Math.max(0, Math.floor(linesToKeep));

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    canvas.width = w;
    canvas.height = h;

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

    // Set the composite operation to 'destination-out'.
    // This makes subsequent drawings "erase" pixels from the canvas, making them transparent.
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, 1)'; // Any opaque color will work for clearing

    const stepSize = safeLinesToKeep + safeThickness;

    // Avoid infinite loops if stepSize is invalid
    if (stepSize <= 0) {
        // Reset composite operation and return the canvas with just the original image
        ctx.globalCompositeOperation = 'source-over';
        return canvas;
    }

    // Check the direction and iterate to draw the erasing lines
    if (direction.toLowerCase() === 'vertical') {
        // Iterate through the width of the canvas
        for (let x = safeLinesToKeep; x < w; x += stepSize) {
            // Draw a vertical rectangle to erase a column of pixels
            ctx.fillRect(x, 0, safeThickness, h);
        }
    } else {
        // Default to horizontal
        // Iterate through the height of the canvas
        for (let y = safeLinesToKeep; y < h; y += stepSize) {
            // Draw a horizontal rectangle to erase a row of pixels
            ctx.fillRect(0, y, w, safeThickness);
        }
    }

    // Reset the composite operation to the default 'source-over' for future drawings
    ctx.globalCompositeOperation = 'source-over';

    // Return the modified canvas
    return canvas;
}