JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
canvas {
}
</style>
<body>
<div class="fluid-container px-3 border">
	 <strong>click</strong> on the canvas to create start box and draw new layout


<div class="row">
	<div class="col">
		<div class="row">
		
	 		<div class="col-12">
  			Canvas:
  		</div>
			
		</div>
		
		<div class="row">
		
	 		<div class="col">
	 				<span id="dispW">Width: </span>  <input class="form-control" type="range" min="16" max="1920" value=960 id="canWidth" onchange="updateSettings()" />
			</div>
		
			<div class="col">
  	 			<span id="dispH">Height: </span><input class="form-control" type="range" min="9" max="1080" value=540 id="canHeight" onchange="updateSettings()" /> 
			</div> 
			
			
	</div>
	
	<div class="row">
		<div class="col-12">
				Start Box:
	 	</div>
	</div>
	<div class="row">
		<div class="col">
  		<span id="canW">Width: </span> <input class="form-control" type="range" min="1" max="200" value=50 id="boxWidth" onchange="updateSettings()"> 
		</div>
	 	<div class="col">
			<span id="canH">Height: </span> <input class="form-control" type="range" min="1" max="200" value=100 id="boxHeight" onchange="updateSettings()">
			</div>
</div>
	<div class="row">
		<div class="col-12">
			Line Width: 
  		<input class="form-control" type="range" min="1" max="20" value="5" id="linewidth" onchange="updateSettings()">	</div>
		</div>
		
		<div class="row">
		<div class="col-6">
	<p>Large Vertical Boxes: 
  <input type="range" min="1" max="10" value="1" id="lvb" onchange="getTotal()"></p>
	  <p>Medium inner Boxes: 
  <input type="range" min="1" max="10" value="1" id="inner" onchange="getTotal()"></p>
	<p>Smallest inner Boxes: 
  <input type="range" min="1" max="10" value="1" id="smallest" onchange="getTotal()">
	</p>
	</div>
		<div class="col-6">
	 toggle horizontal/vertical
<label class="switch">
  <input type="checkbox" id="toggle" onchange="toggle()">
  <span...

JavaScript

var ImageWidth = 960
var ImageHeight = 540

var direction1 = "x";
var direction2 = "y";
var vert = true;

var LargeVerticalBoxes = parseInt(document.getElementById("lvb").value);
var inner = parseInt(document.getElementById("inner").value);
var smallest = parseInt(document.getElementById("smallest").value);
var totalboxes = "";

var clickBoxWidth = 200;
var clickBoxHeight = 100;
var lineWidth = 5;

var clickBox_xStart = 0;
var clickBox_yStart = 0;

var minSize = 0.1
var maxSize = 0.9

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');


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

updateSettings();
canvas.addEventListener('click', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  console.log(mousePos.x + ',' + mousePos.y);

  clearCanvas();
  ctx.beginPath();
  calcclickBox(mousePos.x, mousePos.y)
  ctx.rect(clickBox_xStart, clickBox_yStart, clickBoxWidth, clickBoxHeight);
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = 'black';
  ctx.stroke();

  ctx.closePath();
  reDraw();
}, false);


download_img = function(el) {
  var image = canvas.toDataURL("image/png");
  el.href = image;
};


function updateSettings() {
  lineWidth = parseInt(document.getElementById("linewidth").value,10);
  clickBoxWidth = parseInt(document.getElementById("boxWidth").value,10);
  clickBoxHeight = parseInt(document.getElementById("boxHeight").value,10);
  canvas.width = parseInt(document.getElementById("canWidth").value,10);
  canvas.height = parseInt(document.getElementById("canHeight").value,10);
  document.getElementById("dispW").innerText = "Width: " + canvas.width;
  document.getElementById("dispH").innerText = "Height: " + canvas.height;
  document.getElementById("canW").innerText = "Width: " + clickBoxWidth;
  document.getElementById("canH").innerText = "Height: " + clickBoxHeight;
}


function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}


function calcclickBox(x, y) {
  clickBox_xStart =...