Drawing non-overlapping dot patterns

What's the most efficient way in JS to draw random dot pattern while ensuring any two dots DO NOT overlap?

My code:

var createOrangeDotsCircle = function () {
  for (var i = 0; i <= orangeCircleNum; i++) {
     context.beginPath();
     const dist = (Math.random() * centripetal) * distFromCenter;
     const angle = Math.random() * Math.PI * 2;
     var rand_x = dist * Math.cos(angle) + centerOrange.x;
     var rand_y = dist * Math.sin(angle) + centerOrange.y;
     context.arc(rand_x, rand_y, radius, 1, 2 * Math.PI);
     context.fill();
     context.closePath();
     orangeDotsArray.push(rand_x);
     orangeDotsArray.push(rand_y);
     }  
  }
createOrangeDotsCircle();

I'd like the total number of dots to equal "orangeCircleNum", so ideally would not simply throw out instances of overlapping pairs, but instead retry until total dots on screen = orangeCircleNum.