Image Line Drawer And Eraser

function processImage(originalImg, linesToDraw = 5, linesToErase = 5, lineWidth = 2, lineColor = 'black', orientation = 'horizontal') {
    // Sanitize parameters to ensure they are valid numbers and have sensible minimums
    const numLinesToDraw = Math.max(0, Number(linesToDraw) || 0);
    const numLinesToErase = Math.max(0, Number(linesToErase) || 0);
    const lw = Math.max(1, Number(lineWidth) || 1); // Line width must be at least 1px to prevent infinite loops

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

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

    canvas.width = width;
    canvas.height = height;

    // 1. Draw the original image onto the canvas. This will be the base layer.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // If there are no lines to draw, the task is done. Return the canvas with the original image.
    if (numLinesToDraw <= 0) {
        return canvas;
    }

    // 2. Set up the line style for drawing.
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lw;

    let position = 0;
    const dimension = (orientation === 'horizontal') ? height : width;

    // 3. Loop through the image dimension (height or width) and apply the draw/erase pattern.
    // The "erase" part is achieved by simply skipping sections, leaving the original image visible.
    while (position < dimension) {
        
        // --- Draw Phase ---
        // Draw 'numLinesToDraw' consecutive lines.
        for (let i = 0; i < numLinesToDraw && position < dimension; i++) {
            // To ensure a line of thickness `lw` perfectly fills a band from `position` to `position + lw`,
            // we must draw the line in the middle of that band.
            const lineCenter = position + lw / 2;

            ctx.beginPath();
            if (orientation === 'horizontal') {
                ctx.moveTo(0, lineCenter);
                ctx.lineTo(width, lineCenter);
            } else { // 'vertical' orientation
                ctx.moveTo(lineCenter, 0);
                ctx.lineTo(lineCenter, height);
            }
            ctx.stroke();

            // Advance the position to the start of the next line band.
            position += lw;
        }

        // --- Erase (Skip) Phase ---
        // Skip 'numLinesToErase' lines by advancing the position without drawing.
        position += numLinesToErase * lw;
    }

    return canvas;
}