JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<style>
canvas {
}
</style>
<body>

<canvas id="myCanvas" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

JavaScript

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}


function storeCoordinate(xVal, yVal, array) {
		array.push({
			x: xVal,
			y: yVal
		});
}

function storeLine(startX, startY, endX, endY, array) {
		array.push({
				start : {
								x: startX,
								y: startY
								},
				end : {
								x: endX,
								y: endY
							}
				});
}


function findLongestLine(array) {
	var LongestLine = {axis : "", index: 0, length: 0};
	var LastLength = 0
		for (i = 0; i < array.length; i++) {
			
			if (array[i].start.x !== array[i].end.x) {	// if  start/end X are different then it must be a Horizontal line
					if (array[i].end.x-array[i].start.x > LastLength) {
					LastLength = array[i].end.x-array[i].start.x;
					LongestLine.axis = "h";
					LongestLine.index = i;
					LongestLine.length = LastLength;
					}
					
			}
			else {
					if (array[i].end.y-array[i].start.y > LastLength) {
					LastLength = array[i].end.y-array[i].start.y;
					LongestLine.axis = "v"
					LongestLine.index = i;
					LongestLine.length = LastLength;
					}
					
				}
			
			}
			return LongestLine;
	}
			


var ImageWidth = 500
var ImageHeight = 281

var minHeight = 80
var minWidth = 50


var rndY = getRndInteger(minHeight, ImageHeight-minHeight)
var rndX = getRndInteger(minWidth, ImageWidth-minWidth)

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.canvas.width = ImageWidth;
ctx.canvas.height = ImageHeight;


var startCoords = [];
var endCoords = [];

var Lines = [];


for (i = 0; i < 5; i++) {
  
	if ( i == 0 ) // if its the first time through the loop then get random y height and draw line accross
	{

		storeLine(0, rndY, ImageWidth, rndY, Lines); // store the line in the array
		
		ctx.beginPath();
  	ctx.moveTo(Lines[i].start.x, Lines[i].start.y); //start here
  	ctx.lineTo(Lines[i].end.x, Lines[i].end.y); // draw line to this coordinate
  	ctx.stroke();
		//console.log("line: ", i+1);

	}
	else { //if...