Why are my shapes connecting when I draw them on JavaScript canvas?

Question

When I draw multiple circles onto my canvas, they sort of come together to form a weird shape. I have 25 "x" and "y" values to draw the circles stored in an array. I am not sure if this is because the "x" and "y" values of 2 or more circles are the same. Is there any way I can prevent this and/or make sure the x and y values of the circles are minimum 10 away from any other values? Thanks.

Edit: I have found a solution to this thanks to Nick Parsons. I am still wondering if I can check if two or more "x" or "y" values are x (x symbolizes a number) amount close to each other, so for example: if 2 different "x" values have a difference less than 10, log "too close" in the console.

Image of Issue:

My JavaScript: (I have tried to add helpful comments)

    var canvas = document.getElementById("canvas");

    var ctx = canvas.getContext("2d");

    var bubbleData = generateBubbles(); //Array the x and y values are stored in

    var bubbleDataLength = bubbleData.length;

    var bubbledataX = bubbleData[0].x;

    var bubbleDataY = bubbleData[0].y;

    var currentX;

    var currentY;

    function generateBubbles() {
        var generatedBubbleData = [];

        var bubbleCount = 0;
        var maxBubbleCount = 25;

        var bubbleX = 0;
        var bubbleY = 0;

        function yCalc() { //Function that returns the y value of each circle
            var currentY;
            var mathRandom = Math.floor(Math.random() * 101);
            if(mathRandom < 21) {
                bubbleY = 600;
            }

            if(mathRandom < 41 && mathRandom > 20) {
                bubbleY = 500;
            }

            if(mathRandom < 61 && mathRandom > 40) {
                bubbleY = 400;
            }

            if(mathRandom < 81 && mathRandom > 60) {
                bubbleY = 300;
            }

            if(mathRandom < 101 && mathRandom > 80) {
                bubbleY = 200;
            }

            return currentY;
        }

        var mathRandom = Math.floor(Math.random() * 101);

        function xCalc() { //Function that returns the x value of each circle
            var currentX;
            if(mathRandom < 26) {
                bubbleX = Math.random() * 150;
            }

            if(mathRandom < 51 && mathRandom > 25) {
                bubbleX = Math.random() * 175;
            }

            if(mathRandom < 76 && mathRandom > 50) {
                bubbleX = Math.random() * 200;
            }

            if(mathRandom > 75) {
                bubbleX = Math.random() * 250;
            }
            return currentX;
            }

            while(bubbleCount < 25) { //Only allows 25 x and y values
            currentX = xCalc();
            currentY = yCalc();


            generatedBubbleData.push({
                x: bubbleX,
                y: bubbleY
            });

            if(bubbleCount <= 25) { 
                bubbleCount++; 
                mathRandom = Math.floor(Math.random() * 101);
                xCalc(); 
            }
        }
            return generatedBubbleData;
    }

    generateBubbles();

    function draw() {
        canvas.width = window.innerWidth; // Sets canvas width and doesn't make drawings blurry
        canvas.height = window.innerHeight; // Sets canvas height and doesn't make drawings blurry
        ctx.fillStyle = "red";
        ctx.beginPath(); 
        bubbleData.forEach(function(bubbleDataItem){ //Draws the 25 circles with the stored x and y values
            ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2* Math.PI); // fillRect post setting size
            ctx.fill();
        })

    }

    draw();

function update(deltaTime) {
    if(!deltaTime) return;

    bubbleData.forEach(function(bubbleDataItem){
    bubbleDataItem.x += 4;
});

}



let lastTime = 0;

function gameLoop(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;
    ctx.clearRect(0, 0, 800, 600);
   // bubbleData.forEach(function(bblData){ctx.clearRect(bblData.x, bblData.y, 10, 10)})

    bubbleData.forEach(function(bblData){bblData.x += 1; bblData.y -= 1;})

    update(deltaTime);
    draw();

    requestAnimationFrame(gameLoop);
}
gameLoop();

Answer 1

You need to begin your path each time you create a new circle, so you can move ctx.beginPath() into your for loop like so:

bubbleData.forEach(function(bubbleDataItem) { 
  ctx.beginPath();
  ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2 * Math.PI); 
  ctx.fill();
});

See example below:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var bubbleData = generateBubbles(); //Array the x and y values are stored in
var bubbleDataLength = bubbleData.length;
var bubbledataX = bubbleData[0].x;
var bubbleDataY = bubbleData[0].y;
var currentX;
var currentY;

function generateBubbles() {
  var generatedBubbleData = [];
  var bubbleCount = 0;
  var maxBubbleCount = 25;
  var bubbleX = 0;
  var bubbleY = 0;

  function yCalc() { //Function that returns the y value of each circle
    var currentY;
    var mathRandom = Math.floor(Math.random() * 101);
    if (mathRandom < 21) {
      bubbleY = 600;
    }

    if (mathRandom < 41 && mathRandom > 20) {
      bubbleY = 500;
    }

    if (mathRandom < 61 && mathRandom > 40) {
      bubbleY = 400;
    }

    if (mathRandom < 81 && mathRandom > 60) {
      bubbleY = 300;
    }

    if (mathRandom < 101 && mathRandom > 80) {
      bubbleY = 200;
    }

    return currentY;
  }

  var mathRandom = Math.floor(Math.random() * 101);

  function xCalc() { //Function that returns the x value of each circle
    var currentX;
    if (mathRandom < 26) {
      bubbleX = Math.random() * 150;
    }

    if (mathRandom < 51 && mathRandom > 25) {
      bubbleX = Math.random() * 175;
    }

    if (mathRandom < 76 && mathRandom > 50) {
      bubbleX = Math.random() * 200;
    }

    if (mathRandom > 75) {
      bubbleX = Math.random() * 250;
    }
    return currentX;
  }

  while (bubbleCount < 25) { //Only allows 25 x and y values
    currentX = xCalc();
    currentY = yCalc();


    generatedBubbleData.push({
      x: bubbleX,
      y: bubbleY
    });

    if (bubbleCount <= 25) {
      bubbleCount++;
      mathRandom = Math.floor(Math.random() * 101);
      xCalc();
    }
  }
  return generatedBubbleData;
}

generateBubbles();

function draw() {
  canvas.width = window.innerWidth; // Sets canvas width and doesn't make drawings blurry
  canvas.height = window.innerHeight; // Sets canvas height and doesn't make drawings blurry
  ctx.fillStyle = "red";
  
  bubbleData.forEach(function(bubbleDataItem) { //Draws the 25 circles with the stored x and y values
    ctx.beginPath();
    ctx.arc(bubbleDataItem.x, bubbleDataItem.y, 20, 0, 2 * Math.PI); // fillRect post setting size
    ctx.fill();
  });
  

}

draw();

function update(deltaTime) {
  if (!deltaTime) return;

  bubbleData.forEach(function(bubbleDataItem) {
    bubbleDataItem.x += 4;
  });

}



let lastTime = 0;

function gameLoop(timestamp) {
  let deltaTime = timestamp - lastTime;
  lastTime = timestamp;
  ctx.clearRect(0, 0, 800, 600);
  // bubbleData.forEach(function(bblData){ctx.clearRect(bblData.x, bblData.y, 10, 10)})

  bubbleData.forEach(function(bblData) {
    bblData.x += 1;
    bblData.y -= 1;
  })

  update(deltaTime);
  draw();

  requestAnimationFrame(gameLoop);
}
gameLoop();

<canvas id="canvas" height="400" width="400" style="border: 1px solid black;"></canvas>