如何避免重复?

window.addEventListener("load", draw);
 
 function draw() {
  var canvas = document.getElementById("balls"), // Get canvas
      ctx = canvas.getContext("2d"); // Context
      
  canvas.width = document.body.clientWidth; // Set canvas width
  canvas.height = document.documentElement.scrollHeight; // Height
      var cW = canvas.width, cH = canvas.height; // Save in vars
      ctx.fillStyle = "#fff022"; // Paint background
      ctx.fillRect(0, 0, cW, cH); // Coordinates to paint
      var arrayOfBalls = createBalls(); // create all balls
      setPositions(arrayOfBalls, cW, cH);
      arrayOfBalls.forEach(ball => { // iterate balls to draw
      ctx.beginPath(); // start the paint
      ctx.fillStyle = ball.color;
      ctx.arc(ball.x, ball.y, ball.radius, 0, (Math.PI/180) * 360, false); // draw the circle
      ctx.fill(); // fill
      ctx.closePath(); // end the paint
      });
 }

 function Ball() {
  this.x = 0; // x position of Ball
  this.y = 0; // y position of Ball
  this.radius = Math.floor(Math.random() * ( 30 - 10 + 1) + 10);
  this.color = "";
 }
 
 Ball.prototype.setColor = function(){
 for(var j = 0, hex = "0123456789ABCDEF", max = hex.length,
    random, str = ""; j <= 6; j++, random = Math.floor(Math.random() * max), str += hex[random])
    this.color = "#" + str;
 };
  
 function random(val, min) {
  return Math.floor(Math.random() * val + min); // Random number
 }
 
 function checkSeparation(value, radius, toCompare) {
   var min = value - radius, // Min border of circle
       max = value + radius; // Max border of circle
       // Why ? e.g => x position of circle + this radius it will   be its right edge 
       for(; min <= max; min++) {
       if(toCompare.includes(min)) return false;
       /*
       Since all the positions previously obtained, I add them to          the array, in order to have a reference when verifying the          other positions and that they do NOT collide.
       Here I check if they collide.

       In the range of:

       [pos x - its radius, pos x + its radius]
       */
       }
   return true;   // If they never collided, it returns true
 }
 
 function createBalls() { 
  var maxBalls = 50, // number of balls
      balls = []; // array of balls
       
     for(var j = 0; j < maxBalls; j++) { // create 50 balls
     var newBall = new Ball(); // create ball 
         newBall.setColor(); // set the ball color
         balls.push(newBall); //push the ball to the array of balls
     }
     return balls; // return all balls to draw later
 }
 
 
 function setPositions(balls, canvasW, canvasH) {
  var savedPosX = [], // to save x pos of balls
      savedPosY = []; // to save y pos of balls
  for(var start = 0, max = balls.length; start < max; start++) {
   var current = balls[start], // current ball
       randomX = random(canvasW, current.radius), // get random value for x pos
       randomY = random(canvasH, current.radius); // get random value for y pos

       if(checkSeparation(randomX, current.radius, savedPosX)) {
         current.x = randomX; // If it position, along with your radio does not touch another circle, I add the position
       } else { 
         // start--; continue;
         console.log("X: The above code causes an infinite loop");
       }
       if(checkSeparation(randomY, current.radius, savedPosY)) {
         current.y = randomY;
       } else {
         // start--; continue;
         console.log("Y: The above code causes an infinite loop");
       }
  }
 }

body,html {
 margin: 0; border: 0; padding: 0; overflow: hidden;
}

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