title: What does beginPath() and closePath() do exactly?
body: <p>The question that I have is with <strong>context.beginPath()</strong> and <strong>context.closePath()</strong>. The code below will draw a circle in an arc around the screen until it disappears followed by a small dot which I would comment out because it is a .jpg which I do not know how to include.</p>
  
  <p>My question is exactly what does the beginPath() do and also the closePath() do?</p>
  
  <p>If I comment them out I get a wild result other than what I am expecting. I have looked on the internet but I have not seen the results like this.</p>
  
  <p>Code with a question:</p>
  
  <pre><code>function drawTheBall() {
      context.fillStyle = "#00AB0F"; //sets the color of the ball
      context.beginPath();
          context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
      context.closePath();
      context.fill();
  }
  </code></pre>
  
  <p>Working code below</p>
  
  <p>HTML-Javascript</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;CH5EX10: Moving In Simple Geometric Spiral &lt;/title&gt;
  &lt;script src="modernizr.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  window.addEventListener('load', eventWindowLoaded, false);  
  function eventWindowLoaded() {
      canvasApp();
  }
  
  function canvasSupport () {
      return Modernizr.canvas;
  }
  
  function canvasApp() {
      var radiusInc = 2;
      var circle = {centerX:250, centerY:250, radius:2, angle:0, radiusInc:2}
      var ball = {x:0, y:0,speed:.1};
      var points = new Array();
  
      theCanvas = document.getElementById('canvasOne');
      context = theCanvas.getContext('2d');
  
      var pointImage = new Image();
      pointImage.src = "point.png";   &lt;-- Comment this line out
  
      if (!canvasSupport()) {
          return;
      }
  
    function erraseCanvas() {
       context.clearRect(0,0,theCanvas.width,theCanvas.height);
    }
  
    function drawPathPoints() {
      //Draw points to illustrate path
      points.push({x:ball.x,y:ball.y});
      for (var i= 0; i&lt; points.length; i++) {
          context.drawImage(pointImage, points[i].x, points[i].y,1,1);
      }
    }
  
    function drawTheBall() {
      context.fillStyle = "#00AB0F"; //sets the color of the ball
      context.beginPath();
          context.arc(ball.x,ball.y,10,0,Math.PI*2,true); //draws the ball
      context.closePath();
      context.fill();
    }
  
    function buildBall() {
      ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
      ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;
      circle.angle += ball.speed;
      circle.radius += radiusInc; 
    }
  
    function  drawScreen () {
      erraseCanvas();
      buildBall();
      drawPathPoints();
      drawTheBall();
    }
  
      function gameLoop() {
          window.setTimeout(gameLoop, 20);
          drawScreen()    
      }
  
      gameLoop();
  }
  
  
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;  
  &lt;div style="position: absolute; top: 50px; left: 50px;"&gt;
  
  &lt;canvas id="canvasOne" width="500" height="500"&gt;
   Your browser does not support the HTML 5 Canvas. 
  &lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>