Draw points on a circle's edge

Question

I want draw something like this in javascript:

Example:
The bigger circle: r = 5

What do I want to do? to position circles by forming a circle

My questions are (I would like to know):

1. How much points can I draw on a circle if I know the ray,
   the distance between each circle and the radius of each circle?

2. How can I find the position of each circle (to draw automatically)?

3. Like the question 1 but the circles do not have the same radius.

Thank you!

Answer 1

Displace points around a circle edge equidistantly

Using HTML Canvas and a bit of trigonometry Create a reusable circles() function and pass the desired arguments for Number of circles, Size, Radius, Color:

const ctx = document.getElementById("canvas").getContext("2d");
const cvsSize = 400;

ctx.canvas.width = cvsSize;
ctx.canvas.height = cvsSize;

function circles(tot, rad, dist, color) {
  const arc = Math.PI * 2 / tot; // Arc in Radians
  let ang = 0; // Start at angle 0 (East)

  for (let i = 0; i < tot; i++) {
    const x = dist * Math.cos(ang) + (cvsSize / 2);
    const y = dist * Math.sin(ang) + (cvsSize / 2);
    ctx.beginPath();
    ctx.arc(x, y, rad, 0, Math.PI * 2, false);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.closePath();
    ang += arc;
  }
}

// Circles, Radius, Distance, Color
circles(3, 5, 10, "#f0b");
circles(10, 8, 50, "#0bf");
circles(17, 10, 90, "#bf0");
circles(21, 15, 140, "#b0f");

<canvas id="canvas"></canvas>