JSFiddle - React, Tailwind, and code Playground

HTML

<div>Click to change rectangle position</div>
<div id="result"></div>
<canvas width="320" height="240"></canvas>

CSS

div,canvas { font-family:monospace; margin:10px; }

JavaScript

function Point(x, y) {
    this.x = x;
    this.y = y;
}

function Rectangle(left, top, width, height) {
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = height;
}

Rectangle.prototype.intersectsLine = function(p1, p2) {
    var minX = p1.x;
    var maxX = p2.x;
    
    if (p1.x > p2.x) {
        minX = p2.x;
        maxX = p1.x;
    }
    
    if (maxX > this.left + this.width)
        maxX = this.left + this.width;
    
    if (minX < this.left)
        minX = this.left;
    
    if (minX > maxX)
        return false;
    
    var minY = p1.y;
    var maxY = p2.y;
    
    var dx = p2.x - p1.x;
    
    if (Math.abs(dx) > 0.0000001) {
        var a = (p2.y - p1.y) / dx;
        var b = p1.y - a * p1.x;
        minY = a * minX + b;
        maxY = a * maxX + b;
    }
    
    if (minY > maxY) {
        var tmp = maxY;
        maxY = minY;
        minY = tmp;
    }
    
    if (maxY > this.top + this.height)
        maxY = this.top + this.height;
    
    if (minY < this.top)
        minY = this.top;
    
    if (minY > maxY)
        return false;
    
    return true;
}

function testIntersection(evt) {
    var rect = new Rectangle(
        evt.pageX - $(this).offset().left,
        evt.pageY - $(this).offset().top,
        50,
        50
    );

    var lines = [
        { p1: new Point(20, 100), p2: new Point(20, 200) },
        { p1: new Point(100, 20), p2: new Point(200, 20) },
        { p1: new Point(180, 200), p2: new Point(300, 160) }
    ];
    
    var intersects = false;
    for (var i = 0; i < lines.length; i++)
        intersects = intersects || rect.intersectsLine(lines[i].p1, lines[i].p2);

    var $res = $("#result");

    $res.html("");
    $res.append("rect.left: " + rect.left + "<br />");
    $res.append("rect.top: " + rect.top + "<br />");
    $res.append("rect.width: " + rect.width + "<br />");
    $res.append("rect.height: " + rect.height + "<br />");
    $res.append("<br />Intersection: " +...