Weird line appearing in canvas

Question

I am trying to animate many circles appearing in a curve in my canvas using the arc method and there is a weird tangent line appearing and that shouldn't be the case because I didn't include any code for the line to appear, only for circles. Can someone explain to me why is this line appearing? Here is all the code

window.requestAnimFrame = (function() {
       /* window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || */
  return function(callback) {
    window.setTimeout(callback, 1000);
  };
})();
var graph = {
  x: 0,
  y: 0,
  incur: 0.6,
  canvas: document.getElementsByTagName('canvas')[0],
  ctx: null,
  ratio: 640 / 1136,
  init: function() {
    graph.ctx = graph.canvas.getContext('2d');


    graph.resize();

  },
  resize: function() {
    graph.canvas.height = window.innerHeight;
    graph.canvas.width = graph.ratio * window.innerHeight;
    console.log("asd")


  },
  loop: function() {
    graph.incur += 0.6
    window.requestAnimFrame(graph.loop);
    console.log(graph.incur)
    graph.x += graph.incur
    graph.y += graph.incur * graph.incur

    //graph.draw.clear();
    graph.draw.circle(graph.x, graph.y, 10, "#FF0000")

  }


}
graph.draw = {
  clear: function() {
    graph.ctx.clearRect(0, 0, graph.canvas.width, graph.canvas.height)
  },

  circle: function(x, y, r, col) {
    graph.ctx.fillStyle = col;
    graph.ctx.arc(x, y, r, 0, Math.PI * 2, true)
    graph.ctx.fill();
  }



}
graph.init();
window.addEventListener("resize", graph.resize);
graph.loop();

canvas {
  display: block;
  margin: 0 auto;
  background-color: #808080;
}

<canvas>
</canvas>

Here is a link to the screen shot of the weird line:

weird line

Answer 1

The line is appearing because the arc method will move the path to the starting x/y coordinates - drawing a line by doing so, and then draw the circle. You can easily avoid this behavior by calling moveTo before drawing the circle.

Demo:

window.requestAnimFrame = (function(){
 return function( callback ){
    window.setTimeout(callback, 1000);
  }
})()

var graph = {
    x: 0,
    y: 0,
    incur: 0.6,
    canvas: document.querySelector('canvas'),
    ctx: null,
    ratio: 640/1136,

    init(){
        graph.ctx = graph.canvas.getContext('2d');
        graph.resize();
    },

    resize(){
        graph.canvas.height = window.innerHeight;
        graph.canvas.width = graph.ratio * window.innerHeight;
    },

    loop(){
        graph.incur += 0.6
        window.requestAnimFrame(graph.loop)
        graph.x += graph.incur
        graph.y += graph.incur ** 2
        graph.draw.circle(graph.x,graph.y,10,"#FF0000")
    },

    draw: {
        circle(x, y, r, color) {
            graph.ctx.fillStyle = color
            graph.ctx.moveTo(x + arc.radius, y)
            graph.ctx.arc(x, y, r, 0, Math.PI * 2)
            graph.ctx.fill()
        }
    }
}

graph.init();
window.addEventListener("resize", graph.resize);
graph.loop();

canvas {
  display: block;
  margin: 0 auto;
  background-color: #808080;
}

<canvas></canvas>