var palette = ['#393A3F', '#E82863', '#F6A329', '#34B1E7', '#81C683'];
var canvas = document.getElementById('draw');
var ctx = canvas.getContext('2d');
var rangeA = [10, 110];
var rangeB = [60, 160];
var rangeC = intersectingRange(rangeA, rangeB);
var collisionText = 'Range: [' + rangeC + ']';
var leftOffset = 18;
var topOffset = 24;
drawLines(ctx, [rangeA, rangeB], topOffset);
drawText(ctx, collisionText, leftOffset, topOffset);
drawBoundry(ctx, rangeC, topOffset);
function collisionDetected(rangeA, rangeB) {
var distA = Math.abs(rangeA[1] - rangeA[0]) / 2;
var distB = Math.abs(rangeB[1] - rangeB[0]) / 2;
var midA = (rangeA[0] + rangeA[1]) / 2;
var midB = (rangeB[0] + rangeB[1]) / 2;
return Math.sqrt((midB - midA) * (midB - midA)) < (distA + distB);
}
function intersectingRange(rangeA, rangeB) {
if (collisionDetected(rangeA, rangeB)) {
return [Math.max(rangeA[0], rangeB[0]), Math.min(rangeA[1], rangeB[1])];
}
return null;
}
function drawText(ctx, text, x, y) {
ctx.save();
ctx.font = '18px Arial';
ctx.fillText(text, x, y);
ctx.restore();
}
function drawLines(ctx, lines, topOffset) {
topOffset = topOffset || 0;
var sizeWidth = ctx.canvas.clientWidth;
var sizeHeight = ctx.canvas.clientHeight - topOffset;
var yOffset = sizeHeight / (lines.length + 1);
for (var i = 0; i < lines.length; i++) {
var color = palette[i % palette.length];
var yPos = (i + 1) * yOffset + topOffset;
drawLine(ctx, lines[i], yPos, color)
}
}
function drawLine(ctx, range, index, color) {
ctx.save();
ctx.beginPath();
ctx.moveTo(range[0], index);
ctx.lineTo(range[1], index);
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.stroke();
ctx.restore();
}
function drawBoundry(ctx, bounds, topOffset) {
var sizeHeight = ctx.canvas.clientHeight - topOffset;
var padding = sizeHeight * 0.25;
var y1 = topOffset + padding;
var y2 = sizeHeight + topOffset - padding;
ctx.save();
ctx.beginPath();
ctx.strokeStyle = palette[4];
ctx.setLineDash([5, 5]);
ctx.lineWidth = 2;
ctx.rect(bounds[0], y1, bounds[1] - bounds[0], sizeHeight * 0.5);
ctx.stroke();
ctx.restore();
}
canvas#draw {
background: #FFFFFF;
border: thin solid #7F7F7F;
}
<canvas id="draw" width="180" height="160"></canvas>