How to align different sizes of circles to middle?

Question

I want to align different size of circles to a middle line, for example:

1 circle:

 var c=document.getElementById("myCanvas"); var ctx=document.getElementById("myCanvas").getContext("2d"); var r1=Math.random()*50; ctx.beginPath(); ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); ctx.arc(c.width/2,c.height/2,r1,0,2*Math.PI); ctx.fill(); 

 <div> <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> </div> 

2 circles:

 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var r1=Math.random()*50; var r2=Math.random()*50; ctx.beginPath(); ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); ctx.arc(-r2+c.width/2,c.height/2,r1,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); ctx.arc(r1+c.width/2,c.height/2,r2,0,2*Math.PI); ctx.fill(); 

 <div> <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> </div> 

how about 3,4,...n circles?

var r[]=[Math.random()*50,Math.random()*50,...];
for(var i=0;i<r.length;i++){
    ctx.beginPath();
    ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16);
    ctx.arc(???+c.width/2,c.height/2,r[i],0,2*Math.PI);
    ctx.fill();
}

what is the general formula of that?

Answer 1

You first need to calcalute totalRadius by summing all radii. The very left point will be cavnas.width/2 - totalRadius . Then you simply draw each next circle using previous left

 const canvas = document.querySelector('#myCanvas') const ctx = canvas.getContext("2d") const draw = (r, center) => { ctx.beginPath() ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); ctx.arc(center, canvas.height/2, r, 0, 2*Math.PI); ctx.fill(); } const randomR = () => 10 + Math.random()*40 const rs = new Array(7).fill().map(randomR) // calculate the very left point let left = canvas.width/2 - rs.reduce((sum, r) => sum + r) rs.forEach(r => { // center will be current left + r draw(r, left + r) // next left moved by diameter left += 2*r }) 

 <div> <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> </div>