Image Vertical Line Adder

function processImage(originalImg, lineColor = "black", lineWidth = 1, lineSpacing = 20, lineStartX = 0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine the dimensions for the canvas.
    // Use naturalWidth/naturalHeight for HTMLImageElement to get original image dimensions.
    // Fallback to width/height for other canvas image sources (like another canvas) or if natural dimensions aren't available.
    const imgActualWidth = originalImg.naturalWidth || originalImg.width;
    const imgActualHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgActualWidth;
    canvas.height = imgActualHeight;

    // Draw the original image onto the canvas
    // This will cover the entire canvas with the original image.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Set line properties for the vertical lines
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;

    // Only proceed to draw lines if lineWidth is positive (otherwise, lines are not stroked or behavior is undefined)
    // and lineSpacing is positive (to avoid infinite loops or nonsensical drawing).
    if (lineWidth > 0 && lineSpacing > 0) {
        // Loop to draw vertical lines
        // 'x' represents the center of the vertical line.
        // The loop starts at lineStartX and increments by lineSpacing.
        // Lines are drawn as long as their x-coordinate is less than the canvas width.
        for (let x = lineStartX; x < canvas.width; x += lineSpacing) {
            ctx.beginPath();      // Start a new path for each line
            ctx.moveTo(x, 0);     // Move to the top of the canvas at the current x-coordinate
            ctx.lineTo(x, canvas.height); // Draw a line down to the bottom of the canvas
            ctx.stroke();         // Render the line
        }
    }

    // Return the canvas element.
    // This canvas now contains the original image with the added vertical lines.
    return canvas;
}