Image Dotted Line Adder

function processImage(originalImg, lineColor = 'black', lineWidth = 2, dashLength = 10, gapLength = 5, direction = 'horizontal', spacing = 20) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are valid numbers where expected
    const numLineWidth = Math.max(1, Number(lineWidth));
    const numDashLength = Math.max(1, Number(dashLength));
    const numGapLength = Math.max(0, Number(gapLength)); // Gap can be 0
    const numSpacing = Math.max(1, Number(spacing));

    // Set canvas dimensions to match the original image's intrinsic size
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // Set line properties
    ctx.strokeStyle = String(lineColor);
    ctx.lineWidth = numLineWidth;

    // The setLineDash method takes an array of numbers that specify the lengths of alternating dashes and gaps.
    if (numDashLength > 0 || numGapLength > 0) {
        ctx.setLineDash([numDashLength, numGapLength]);
    } else {
        // If dash and gap are 0, it's effectively a solid line, but let's ensure setLineDash is cleared or set to non-zero
        // to avoid issues if it was previously set. For this tool, it implies no dashes, so a solid line.
        // However, the tool is "Dotted Line Adder", so if dashes are 0, it might be better to draw nothing or handle as solid.
        // For simplicity, if dashes are requested as 0, we proceed, and it may draw solid lines if gap is also 0.
        // If only dashLength is 0, and gap is >0, setLineDash([0, numGapLength]) would draw very short dashes or dots.
        // Browsers usually handle [0, X] as tiny dots.
         ctx.setLineDash([numDashLength, numGapLength]); // Let browser handle it, usually small dots if numDashLength is 0.
    }


    // Draw dotted lines based on direction
    // We adjust the starting point by half the line width to center lines on pixels if needed,
    // but for dashed lines spanning across, starting at spacing/2 is a common approach for even distribution.
    // The line dash pattern starts from the beginning of each path.

    if (direction === 'horizontal' || direction === 'both') {
        for (let y = numSpacing / 2; y < canvas.height; y += numSpacing) {
            ctx.beginPath();
            ctx.moveTo(0, y);
            ctx.lineTo(canvas.width, y);
            ctx.stroke();
        }
    }

    if (direction === 'vertical' || direction === 'both') {
        for (let x = numSpacing / 2; x < canvas.width; x += numSpacing) {
            ctx.beginPath();
            ctx.moveTo(x, 0);
            ctx.lineTo(x, canvas.height);
            ctx.stroke();
        }
    }

    // Reset line dash pattern for any subsequent drawing on this context (good practice)
    ctx.setLineDash([]);

    return canvas;
}