Image Power Line Filter Effect Tool

function processImage(originalImg, lineColor = "rgba(0, 0, 0, 0.2)", lineWidth = 1, lineSpacing = 4, orientation = "horizontal") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    canvas.width = imgWidth;
    canvas.height = imgHeight;

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

    // Validate and parse parameters
    // Parameters can be string or number type according to guidelines.
    // Convert to number where a numeric value is expected.
    const parsedLineWidth = Math.max(1, Number(lineWidth));
    
    // lineSpacing must be at least 1 to prevent infinite loops or zero-step iteration.
    // It can be smaller than parsedLineWidth, which would cause lines to overlap more densely. This is a valid effect.
    const parsedLineSpacing = Math.max(1, Number(lineSpacing));
    
    // Ensure orientation is one of the valid values, defaulting to "horizontal".
    // Normalize to lowercase for case-insensitive comparison.
    let currentOrientation = String(orientation).toLowerCase();
    if (currentOrientation !== "horizontal" && currentOrientation !== "vertical") {
        currentOrientation = "horizontal";
    }

    // Set line properties. Ensure lineColor is treated as a string.
    ctx.strokeStyle = String(lineColor);
    ctx.lineWidth = parsedLineWidth;

    if (currentOrientation === "horizontal") {
        // Calculate an initial offset to center the pattern of lines vertically.
        // This distributes any partial spacing evenly at the top and bottom.
        const yInitialOffset = (imgHeight % parsedLineSpacing) / 2;
        
        for (let y = yInitialOffset; y < imgHeight; y += parsedLineSpacing) {
            ctx.beginPath();
            // The path for the line is defined by moveTo and lineTo.
            // The actual line is drawn centered on this path with the specified lineWidth.
            ctx.moveTo(0, y); // Start of the line on the left edge
            ctx.lineTo(imgWidth, y); // End of the line on the right edge
            ctx.stroke(); // Draw the line
        }
    } else { // Vertical orientation
        // Calculate an initial offset to center the pattern of lines horizontally.
        const xInitialOffset = (imgWidth % parsedLineSpacing) / 2;

        for (let x = xInitialOffset; x < imgWidth; x += parsedLineSpacing) {
            ctx.beginPath();
            ctx.moveTo(x, 0); // Start of the line on the top edge
            ctx.lineTo(x, imgHeight); // End of the line on the bottom edge
            ctx.stroke(); // Draw the line
        }
    }

    return canvas;
}