How to make a for loop that displays a canvas art, but don't displays them on each other?

This is the for loop.

   let stones = 10;
    // for loop to display stones
    var x = [];
    var y = [];
    for (let i = -1; i < stones; i++) {
    var x[i] = mathR(150, 1280);
    var y[i] = mathR(150, 610);
      // if statements
      if (i == 0) {
    if (x[i] > 150 && x[i] < 1280 && y[i] > 150 && y[i] < 610) {
      veryRandomStones2(x[i], y[i]);
    
    
    }
    } else if (i > 0 & x[i] > 150 && x[i] < 1280 && y[i] > 150 && y[i] < 610) {
    if (x > x[i] + 50 || x < x[i] - 50 || y > y[i] + 50 || y < y[i] - 50) {
      veryRandomStones2(x[i], y[i]);
    }
    }
    // for loop under
    }
    // for loop over

I was thinking to make so, it displayed the stones in the canvas, and they don't get to touch each other. The numbers is in pixels. x = xAxis, y = yAxis.

Please help.