JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="post">
  w:<input type="text" value="300" name="w"/>
  h:<input type="text" value="200" name="h" />
  n:<input type="text" value="10" name="n"/>
  <input type="submit" value="go"/>
</form>
<div>
</div>

CSS

canvas{
  background-color:#eeeeee;
  border:1px solid black;
  margin:1px;
}

JavaScript

/*
  w:width of rectangle
  h:height of rectangle
  n:nb of circle on lowest row
*/
function algo1(o,n){
  var w = o.w,
      h = o.h,
      ctx = o.ctx;
  var r = w/(2*n+1);
  var lineIndex = 0;
  while(lineIndex*Math.sqrt(3)*r + r +r <=h){
    var y = lineIndex*Math.sqrt(3)*r + r;
    var offsetLeft = r;
    if(lineIndex%2){
      offsetLeft+= r;
    }
    for(var j=0; j<n; ++j){
      var x = offsetLeft + j*2*r;
      ctx.beginPath();
      ctx.arc(x,y,r,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
    }
    lineIndex++;
  }
  
}

/*
  w:width of rectangle
  h:height of rectangle
  n:nb of circle on lowest row
*/
function algo2(o,n){
  var w = o.w,
      h = o.h,
      ctx = o.ctx;
  var r = w/(2*n+1);
  var lineIndex = 0;
  var inBetween = (w - n*2*r)/(n-1);
  var deltaX = inBetween+2*r;
  while(lineIndex*Math.sqrt(4*r*r - deltaX*deltaX/4) +2*r <=h){
    var y = lineIndex*Math.sqrt(4*r*r - deltaX*deltaX/4) + r;
    var offsetLeft = r;
    if(lineIndex%2){
      offsetLeft+= r+inBetween/2;
    }
    for(var j=0; j<n; ++j){
      if(j==n-1 && lineIndex%2){
        break;
      }
      var x = offsetLeft + j*deltaX;
      ctx.beginPath();
      ctx.arc(x,y,r,0,2*Math.PI);
      ctx.stroke();
      ctx.closePath();
    }
    lineIndex++;
  }
  
}
/*
Longueur : 5 867
Largeur : 2 330

Longueur : 11 998
Largeur : 2 330

*/
function getCanvas(w,h){
  var canvas= document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  var ctx = canvas.getContext('2d');
  ctx.transform(1,0,0,-1,0,h);
  document.getElementsByTagName('div')[0].appendChild(canvas);
  return {
    w:w,
    h:h,
    ctx:ctx
  }
}

function reloadAlgos(w,h,n){
  var algos = {
    A1:algo1,
    A2:algo2
  };
  document.getElementsByTagName('div')[0].innerHTML='';
  for(i in algos){
   algos[i](getCanvas(w,h), n);
  }
}
document.getElementsByTagName('form')[0].onsubmit=function(e){
    e.preventDefault();
    try{
        var w = parseInt(this.w.value,10);
        var h =...