Image Diagonal Line Addition Tool

function processImage(originalImg, lineColor, lineWidth, spacing, direction) {
    // Parameter handling with defaults
    const finalLineColor = typeof lineColor === 'string' ? lineColor : 'black';
    
    let finalLineWidth = parseFloat(lineWidth);
    if (isNaN(finalLineWidth) || finalLineWidth <= 0) {
        finalLineWidth = 1;
    }

    let finalSpacing = parseFloat(spacing);
    if (isNaN(finalSpacing) || finalSpacing <= 0) {
        finalSpacing = 10;
    }

    const validDirections = ['topLeftToBottomRight', 'topRightToBottomLeft'];
    const finalDirection = typeof direction === 'string' && validDirections.includes(direction) ? direction : 'topLeftToBottomRight';

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

    const W = originalImg.naturalWidth || originalImg.width;
    const H = originalImg.naturalHeight || originalImg.height;
    canvas.width = W;
    canvas.height = H;

    // Draw original image
    ctx.drawImage(originalImg, 0, 0, W, H);

    // If width or height is 0, no lines can be effectively drawn.
    if (W === 0 || H === 0) {
        return canvas;
    }

    // Line properties
    ctx.strokeStyle = finalLineColor;
    ctx.lineWidth = finalLineWidth;
    
    // actualStep is the distance between intercepts of parallel lines on an axis (for 45 deg lines).
    // Perpendicular spacing 's' means intercepts are 's * sqrt(2)' apart.
    const actualStep = finalSpacing * Math.sqrt(2); 
    
    // If actualStep is extremely small (e.g., due to very small finalSpacing),
    // it could lead to performance issues or an effectively solid overlay.
    // A threshold like 0.5 pixels for actualStep might be reasonable.
    // If finalSpacing is 1, actualStep is ~1.414. If finalSpacing is 0.1, actualStep is ~0.14
    if (actualStep < 0.1) { 
        // console.warn("Spacing is too small, resulting in too many lines. Lines not drawn.");
        return canvas; 
    }

    ctx.beginPath();

    const addPointToLine = (p, collectedPoints) => { // Helper to add unique points to a list for the current line
        // Check if point is within canvas bounds (redundant for some pre-checked points, but safe)
        // And if not already added (to handle lines passing through corners generating duplicate intersection coords)
        if (p.x >= -1e-3 && p.x <= W + 1e-3 && // Allow for minor floating point errors
            p.y >= -1e-3 && p.y <= H + 1e-3 &&
            !collectedPoints.some(up => Math.abs(up.x - p.x) < 1e-3 && Math.abs(up.y - p.y) < 1e-3)) {
            collectedPoints.push(p);
        }
    };

    if (finalDirection === 'topLeftToBottomRight') { 
        // Lines like '\', slope = +1. Equation: y = x + k, or y - x = k.
        // k = y - x. On canvas, k effectively ranges from -W (line through (W,0)) to H (line through (0,H)).
        // Loop kVal from a bit outside this core range to ensure all lines (including partials at edges) are covered.
        for (let kVal = -W - actualStep; kVal < H + actualStep; kVal += actualStep) {
            const currentLinePoints = [];
            
            // Intersections of y = x + kVal with canvas boundaries [0,0,W,H]
            // Intersection with left edge (x=0): Point (0, kVal)
            if (kVal >= 0 && kVal <= H) addPointToLine({ x: 0, y: kVal }, currentLinePoints);
            // Intersection with top edge (y=0): Point (-kVal, 0)
            if (-kVal >= 0 && -kVal <= W) addPointToLine({ x: -kVal, y: 0 }, currentLinePoints);
            // Intersection with right edge (x=W): Point (W, W + kVal)
            if ((W + kVal) >= 0 && (W + kVal) <= H) addPointToLine({ x: W, y: W + kVal }, currentLinePoints);
            // Intersection with bottom edge (y=H): Point (H - kVal, H)
            if ((H - kVal) >= 0 && (H - kVal) <= W) addPointToLine({ x: H - kVal, y: H }, currentLinePoints);
            
            if (currentLinePoints.length >= 2) {
                // Sort points to ensure consistent drawing order (e.g., from top-left towards bottom-right).
                currentLinePoints.sort((a, b) => (a.x === b.x) ? (a.y - b.y) : (a.x - b.x));
                ctx.moveTo(currentLinePoints[0].x, currentLinePoints[0].y);
                ctx.lineTo(currentLinePoints[1].x, currentLinePoints[1].y);
            }
        }
    } else { // finalDirection === 'topRightToBottomLeft'
        // Lines like '/', slope = -1. Equation: y = -x + k, or y + x = k.
        // k = y + x. On canvas, k effectively ranges from 0 (line through (0,0)) to W+H (line through (W,H)).
        // Loop kVal from a bit outside this core range.
        for (let kVal = -actualStep; kVal < W + H + actualStep; kVal += actualStep) {
            const currentLinePoints = [];

            // Intersections of y = -x + kVal with canvas boundaries [0,0,W,H]
            // Intersection with left edge (x=0): Point (0, kVal)
            if (kVal >= 0 && kVal <= H) addPointToLine({ x: 0, y: kVal }, currentLinePoints);
            // Intersection with top edge (y=0): Point (kVal, 0)
            if (kVal >= 0 && kVal <= W) addPointToLine({ x: kVal, y: 0 }, currentLinePoints);
            // Intersection with right edge (x=W): Point (W, kVal - W)
            if ((kVal - W) >= 0 && (kVal - W) <= H) addPointToLine({ x: W, y: kVal - W }, currentLinePoints);
            // Intersection with bottom edge (y=H): Point (kVal - H, H)
            if ((kVal - H) >= 0 && (kVal - H) <= W) addPointToLine({ x: kVal - H, y: H }, currentLinePoints);

            if (currentLinePoints.length >= 2) {
                // Sort points to ensure consistent drawing order (e.g., from top-right towards bottom-left).
                currentLinePoints.sort((a, b) => (a.x === b.x) ? (a.y - b.y) : (a.x - b.x));
                ctx.moveTo(currentLinePoints[0].x, currentLinePoints[0].y);
                ctx.lineTo(currentLinePoints[1].x, currentLinePoints[1].y);
            }
        }
    }

    ctx.stroke();
    return canvas;
}