How to draw and align different sizes of circles to middle?

248
June 16, 2017, at 1:01 PM

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>

READ ALSO
Value is not binded to the drop down provider unless next row is clicked on the grid

Value is not binded to the drop down provider unless next row is clicked on the grid

I need to update a cell in a infragistics web data grid which has a drop down provider as soon as exiting that cell

225
Does the order of indices matter?

Does the order of indices matter?

As you can see I have 3 points for a triangleThe problem with this is that my triangle doesn't end up getting rendered unless I change the indices to

399
Firebase-Admin, importing it to react application throws Module not found error

Firebase-Admin, importing it to react application throws Module not found error

I'm developming simple React application which uses firebase admin

427
How does ?_escaped_fragment_= work?

How does ?_escaped_fragment_= work?

Pardon me, I'm not able to understand what is an escaped fragment and what does adding "?_escaped_fragment_=" to a URL do? I haven't found any documentation on internet regarding this

242