Image Line Eraser With Skip Options

async function processImage(originalImg, orientation = 'horizontal', eraseSize = 1, skipSize = 1) {
    // Create a new canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is fully loaded to get correct dimensions
    if (!originalImg.complete) {
        await new Promise(resolve => {
            originalImg.onload = resolve;
            // In case the image is already loaded but not marked as complete
            if (originalImg.naturalWidth) resolve(); 
        });
    }

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

    // Set 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 parameters to ensure they are valid, non-negative integers
    let numEraseSize = parseInt(eraseSize, 10);
    if (isNaN(numEraseSize) || numEraseSize < 0) {
        numEraseSize = 1; // Fallback to an erase size of 1
    }

    let numSkipSize = parseInt(skipSize, 10);
    if (isNaN(numSkipSize) || numSkipSize < 0) {
        numSkipSize = 1; // Fallback to a skip size of 1
    }

    // If there's nothing to erase, we can return the canvas as is
    if (numEraseSize === 0) {
        return canvas;
    }

    // Get the pixel data from the entire canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // The total length of one "erase and skip" cycle
    const cycleLength = numEraseSize + numSkipSize;
    
    // Process based on the orientation
    if (orientation === 'horizontal') {
        // Iterate through each row of pixels (y-axis)
        for (let y = 0; y < height; y++) {
            // Check if the current row falls within the "erase" part of the cycle
            if (y % cycleLength < numEraseSize) {
                // If so, make every pixel in this row transparent
                for (let x = 0; x < width; x++) {
                    // Calculate the starting index of the pixel's alpha component in the data array
                    const alphaIndex = (y * width + x) * 4 + 3;
                    // Set the alpha value to 0 (fully transparent)
                    data[alphaIndex] = 0;
                }
            }
        }
    } else { // Assumes 'vertical' orientation
        // Iterate through each column of pixels (x-axis)
        for (let x = 0; x < width; x++) {
            // Check if the current column falls within the "erase" part of the cycle
            if (x % cycleLength < numEraseSize) {
                // If so, make every pixel in this column transparent
                for (let y = 0; y < height; y++) {
                    const alphaIndex = (y * width + x) * 4 + 3;
                    data[alphaIndex] = 0;
                }
            }
        }
    }

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

    // Return the final canvas element
    return canvas;
}