CODEWITHSUNDEEP
javascriptcanvasgeometrylines
boston
boston

Reputation: 31

Removing lines when drawing multiple arcs in a row in javascript

So I'm trying to draw 8 random circles (Or bubbles as I call them in this case) on the screen for a simple project I'm making. I want to make it so that I can show the bubbles, but there are lines connecting each bubble at its startAngle. 

<!DOCTYPE html>

<html>

<head>
     <title>Image</title>
</head>

<body>

     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
     <canvas id="canvas" width="400" height="400"></canvas>
     <script>
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");

         var height = canvas.height;
         var width = canvas.width;


         ctx.strokeRect(0, 0, width, height);


         var bubbles = [];

         var Bubble = function () {
             this.x = Math.floor(Math.random() * width);
             this.y = Math.floor(Math.random() * height);
             this.xspeed = 5;
             this.yspeed = 5;
         };

         for (var i = 0; i < 8; i++) {
             bubbles[i] = new Bubble();
         };

         Bubble.prototype.draw = function () {
             for (var i = 0; i < 8; i++) {
             ctx.fillStyle = "Black";
             ctx.arc(bubbles[i].x, bubbles[i].y, 10, 0, Math.PI * 2, false);
             }
         };

         setInterval(function () {
             for (var i = 0; i < bubbles.length; i++) {
                 ctx.strokeStyle = "Black";
                 bubbles[i].draw();
                 ctx.stroke();
             }
         }, 30);





     </script>
 </body>

 </html>

Basically, I've made 8 Bubble objects, then I've drawn an arc at their x and y (random) position, but it shows lines connecting them like so:

Output of code

When you run the code, it randomly generates 8 different locations and draws 8 arcs at their location, but it shows the lines that connect them. Is there a way to hide or get rid of these lines? I've tried to clear the canvas after each draw, but that hides the entire thing including the circle. I've been searching for most of the day and I couldn't find an answer to my specific problem. The answer is probably obvious, but I couldn't seem to find the solution due to my inexperience.

Upvotes: 2

Views: 1676

Answers (2)

Kaiido
Kaiido

Reputation: 136986

ctx.arc() creates an ctx.lineTo() between the last coordinates of the current path, and the first position of the arc.

So to avoid it, you can simply manually call moveTo() to lift the drawing pen to the first position of the arc.

This way, you can draw multiple arcs in the same Path and in the same stroke call (which becomes interesting when you draw a lot of arcs)

const ctx = c.getContext('2d'),
w = c.width,
h = c.height;

ctx.beginPath(); // call it once
for(let i = 0; i<100; i++){
  let rad = Math.random()*20 + 5
  let posX = rad + Math.random() * (w - rad *2);
  let posY = rad + Math.random() * (h - rad *2); 
  // our arc will start at 3 o'clock
  ctx.moveTo(posX + rad, posY); // so simply add 'rad' to the centerX
  ctx.arc(posX, posY, rad, 0, Math.PI*2);
  }
ctx.stroke(); // call it once
<canvas id="c" width="500"></canvas>

Upvotes: 0

Steve Cooper
Steve Cooper

Reputation: 21490

Call ctx.beginPath() before arc() to draw separate entities?

Upvotes: 4

Related Questions