filling circle with hexagons
<p>I'm trying to find a way to put as much hexagons in a circle as possible. So far the best result I have obtained is by generating hexagons from the center outward in a circular shape. </p>

<p>But I think my calculation to get the <strong>maximum hexagon circles</strong> is wrong, especially the part where I use the <code>Math.ceil()</code> and <code>Math.Floor</code> functions to round down/up some values. </p>

<p>When using <code>Math.ceil()</code>, hexagons are sometimes overlapping the circle.<br>
When using <code>Math.floor()</code> on the other hand , it sometimes leaves too much space between the last circle of hexagons and the circle's border.  </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var c_el = document.getElementById("myCanvas");
var ctx = c_el.getContext("2d");

var canvas_width = c_el.clientWidth;
var canvas_height = c_el.clientHeight;

var PI=Math.PI;
var PI2=PI*2;

var hexCircle = {
 r: 110, /// radius 
 pos: {
  x: (canvas_width / 2),
  y: (canvas_height / 2)
 }
};

var hexagon = {
 r: 20,
 pos:{
  x: 0,
  y: 0
 },
 space: 1
};

drawHexCircle( hexCircle, hexagon );
function drawHexCircle(hc, hex ) {
 drawCircle(hc);
 var hcr = Math.ceil( Math.sqrt(3) * (hc.r / 2) ); 
    var hr =  Math.ceil( ( Math.sqrt(3) * (hex.r / 2) ) ) + hexagon.space; // hexRadius
 var circles =  Math.ceil( ( hcr / hr ) / 2 );
    drawHex( hc.pos.x , hc.pos.y, hex.r ); //center hex ///
 for (var i = 1; i&lt;=circles; i++) {
  for (var j = 0; j&lt;6; j++) {
   var currentX = hc.pos.x+Math.cos(j*PI2/6)*hr*2*i;
   var currentY = hc.pos.y+Math.sin(j*PI2/6)*hr*2*i;
   drawHex( currentX,currentY, hex.r );
   for (var k = 1; k&lt;i; k++) {
    var newX = currentX + Math.cos((j*PI2/6+PI2/3))*hr*2*k;
    var newY = currentY +  Math.sin((j*PI2/6+PI2/3))*hr*2*k;
    drawHex( newX,newY, hex.r );
   }
  }
 }
}

function drawHex(x, y, r){
    ctx.beginPath();
    ctx.moveTo(x,y-r);
    for (var i = 0; i&lt;=6; i++) {
        ctx.lineTo(x+Math.cos((i*PI2/6-PI2/4))*r,y+Math.sin((i*PI2/6-PI2/4))*r);
    }
    ctx.closePath();
    ctx.stroke();
}

function drawCircle( circle ){
 ctx.beginPath();
 ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI);
 ctx.closePath();
 ctx.stroke();
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="350" height="350" style="border:1px solid #d3d3d3;"&gt;</code></pre>
</div>
</div>
</p>