Баг в канвасе при отрисовке второго круга возникает линия

var canvas = document.getElementById('canvas'); 
var degree = Math.PI / 180; 
 
var draw = { 
  ctx: canvas.getContext('2d'), 
 
  grid: true, 
  area: true, 
  border: true, 
 
 
  pattern() { 
    this.ctx.fillStyle = 'white'; 
    this.ctx.fillRect(0, 0, 660, 660); 
    this.ctx.closePath(); 
 
    if (this.grid) 
      this.Grid(); 
 
    if (this.area) 
      this.Area(); 
 
    if (this.border) 
      this.Border(); 
  }, 
 
  draw() { 
    this.pattern(); 
  }, 
 
  Grid() { 
    this.ctx.strokeStyle = '#CCC'; 
    this.ctx.lineWidth = 2; 
    for (let x = 30; x < 660; x += 30) { 
 
      //varctical 
      this.ctx.beginPath(); 
      this.ctx.moveTo(x, 0); 
      this.ctx.lineTo(x, 660); 
      this.ctx.closePath(); 
      this.ctx.stroke(); 
 
      //horixontal 
      this.ctx.beginPath(); 
      this.ctx.moveTo(0, x); 
      this.ctx.lineTo(660, x); 
      this.ctx.closePath(); 
      this.ctx.stroke(); 
    } 
  }, 
 
  Area() { 
    this.ctx.strokeStyle = "red"; 
    this.ctx.lineWidth = 3; 
    this.ctx.strokeRect(30, 30, 600, 600); 
    this.ctx.closePath(); 
  }, 
 
  Border() { 
    this.ctx.strokeStyle = "black"; 
    this.ctx.lineWidth = 2; 
    this.ctx.strokeRect(0, 0, 660, 660); 
    this.ctx.closePath(); 
  }, 
 
  change(name) { 
    if (name == 'grid') 
      this.grid = !this.grid; 
 
    if (name == 'area') 
      this.area = !this.area; 
 
    if (name == 'border') 
      this.border = !this.border; 
  }, 
 
  circle(x, y) { 
    this.ctx.fillStyle = '#f47e46'; 
    this.ctx.arc(x, y, 10, degree * 0, degree * 360); 
    this.ctx.fill(); 
    this.ctx.closePath(); 
  } 
}; 
 
canvas.addEventListener('mouseup', function(e) { 
  let x = e.pageX - e.target.offsetLeft, 
    y = e.pageY - e.target.offsetTop, 
 
    x_pos = Math.round(x / 30) * 30, 
    y_pos = Math.round(y / 30) * 30; 
 
  console.log([x_pos, y_pos]); 
  draw.circle(x_pos, y_pos); 
 
}); 
 
gridb.addEventListener('click', function(e) { 
  draw.change('grid'); 
  draw.draw(); 
}); 
 
areab.addEventListener('click', function(e) { 
  draw.change('area'); 
  draw.draw(); 
}); 
 
borderb.addEventListener('click', function(e) { 
  draw.change('border'); 
  draw.draw(); 
}); 
 
draw.draw();

.button { 
  border: 2px solid black; 
  background-color: #ccc; 
  margin-top: 10px; 
  display: inline-block; 
} 
 
#canvas { 
  display: block; 
}

<canvas id="canvas" width="660" height="660"></canvas> 
<input class="button" value="Grid" id="gridb" type="button"> 
<input class="button" value="Point area" id="areab" type="button"> 
<input class="button" value="Border" id="borderb" type="button">