```
var ctx = document.querySelector("canvas").getContext("2d");
function drawSegments(segments) {
for (let seg of segments) {
ctx.beginPath();
ctx.moveTo(seg.x1, seg.y1);
ctx.lineTo(seg.x2, seg.y2);
ctx.stroke();
}
}
function drawRectangles(rectangles) {
for (let r of rectangles) {
ctx.beginPath();
ctx.rect(r.x, r.y, r.w, r.h);
ctx.stroke();
}
}
// Returns the point (x, y) where two line segments intersect
function getLineIntersection(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) {
let s1_x = p1_x - p0_x;
let s1_y = p1_y - p0_y;
let s2_x = p3_x - p2_x;
let s2_y = p3_y - p2_y;
let s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y);
let t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y);
if (s >= 0 && s <= 1 && t >= 0 && t <= 1) {
return { x: p0_x + (t * s1_x), y: p0_y + (t * s1_y) };
}
return false;
}
function breakSegments(segments, rect) {
let rLeft = rect.x;
let rTop = rect.y;
let rRight = rect.x + rect.w;
let rBot = rect.y + rect.h;
for (let i = 0; i < segments.length; i++) {
let s = segments(i);
let nIntersection = getLineIntersection(s.x1, s.y1, s.x2, s.y2, rLeft, rTop, rRight, rTop);
let wIntersection = getLineIntersection(s.x1, s.y1, s.x2, s.y2, rLeft, rTop, rLeft, rBot);
let eIntersection = getLineIntersection(s.x1, s.y1, s.x2, s.y2, rRight, rTop, rRight, rBot);
let sIntersection = getLineIntersection(s.x1, s.y1, s.x2, s.y2, rLeft, rBot, rRight, rBot);
var closeIntersection, farIntersection;
if (nIntersection && sIntersection) {
let nXDelta = nIntersection.x - s.x1;
let nYDelta = nIntersection.y - s.y1;
let sXDelta = sIntersection.x - s.x1;
let sYDelta = sIntersection.y - s.y1;
if (nXDelta * nXDelta + nYDelta * nYDelta < sXDelta * sXDelta + sYDelta * sYDelta) {
closeIntersection = nIntersection;
farIntersection = sIntersection;
} else {
closeIntersection = sIntersection;
farIntersection = nIntersection;
}
} else if (wIntersection && eIntersection) {
let wXDelta = wIntersection.x - s.x1;
let wYDelta = wIntersection.y - s.y1;
let eXDelta = eIntersection.x - s.x1;
let eYDelta = eIntersection.y - s.y1;
if (wXDelta * wXDelta + wYDelta * wYDelta < eXDelta * eXDelta + eYDelta * eYDelta) {
closeIntersection = wIntersection;
farIntersection = eIntersection;
} else {
closeIntersection = eIntersection;
farIntersection = wIntersection;
}
} else {
continue;
}
segments.splice(i + 1, 0, { x1: farIntersection.x, y1: farIntersection.y, x2: s.x2, y2: s.y2 });
s.x2 = closeIntersection.x;
s.y2 = closeIntersection.y;
break;
}
}
let lineSegments = (
{ x1: 0, y1: 50, x2: 250, y2: 50 },
{ x1: 250, y1: 50, x2: 250, y2: 250 },
{ x1: 250, y1: 250, x2: 100, y2: 250 },
{ x1: 100, y1: 250, x2: 80, y2: 75 },
{ x1: 400, y1: 550, x2: 525, y2: 550 },
{ x1: 525, y1: 550, x2: 550, y2: 350 },
{ x1: 550, y1: 350, x2: 300, y2: 350 },
);
let rects = (
{ x: 200, y: 240, w: 16, h: 16 },
{ x: 500, y: 340, w: 16, h: 16 }
)
breakSegments(lineSegments, rects(0));
breakSegments(lineSegments, rects(1));
drawSegments(lineSegments);
drawRectangles(rects);
```

`<canvas width="800" height="800">`