Calculating the intersection of two lines.

Demonstrating a function for calculating the intersection of two lines, and determining whether the intersection point is on either line segment.

by justin_c_rounds

HTML

<canvas id="canvas" width="400" height="300"></canvas>
<div class="controls">
    <input id="line1XSlider" type="range" min="10" max="390" value="50" />
    <input id="line1YSlider" type="range" min="10" max="290" value="100" />
</div>
<div class="controls">
    <input id="line2XSlider" type="range" min="10" max="390" value="100" />
    <input id="line2YSlider" type="range" min="10" max="290" value="100" />
</div>
<div id="results"></div>

CSS

canvas {
    border: 1px solid green;
    margin: 10px;
}

#results {
    float: right;
    margin: 10px;
}

.controls {
    float: left;
    margin: 10px;
}

input {
    display: block;
}

JavaScript

var line1XSlider = document.getElementById('line1XSlider'),
    line1YSlider = document.getElementById('line1YSlider'),
    line2XSlider = document.getElementById('line2XSlider'),
    line2YSlider = document.getElementById('line2YSlider'),
    context = document.getElementById('canvas').getContext('2d'),
    display = document.getElementById('results');

function checkLineIntersection(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX, line2EndY) {
    // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite) and booleans for whether line segment 1 or line segment 2 contain the point
    var denominator, a, b, numerator1, numerator2, result = {
        x: null,
        y: null,
        onLine1: false,
        onLine2: false
    };
    denominator = ((line2EndY - line2StartY) * (line1EndX - line1StartX)) - ((line2EndX - line2StartX) * (line1EndY - line1StartY));
    if (denominator == 0) {
        return result;
    }
    a = line1StartY - line2StartY;
    b = line1StartX - line2StartX;
    numerator1 = ((line2EndX - line2StartX) * a) - ((line2EndY - line2StartY) * b);
    numerator2 = ((line1EndX - line1StartX) * a) - ((line1EndY - line1StartY) * b);
    a = numerator1 / denominator;
    b = numerator2 / denominator;

    // if we cast these lines infinitely in both directions, they intersect here:
    result.x = line1StartX + (a * (line1EndX - line1StartX));
    result.y = line1StartY + (a * (line1EndY - line1StartY));
/*
        // it is worth noting that this should be the same as:
        x = line2StartX + (b * (line2EndX - line2StartX));
        y = line2StartX + (b * (line2EndY - line2StartY));
        */
    // if line1 is a segment and line2 is infinite, they intersect if:
    if (a > 0 && a < 1) {
        result.onLine1 = true;
    }
    // if line2 is a segment and line1 is infinite, they intersect if:
    if (b > 0 && b < 1) {
        result.onLine2 = true;
    }
   ...