title: Arbitrary shape getting drawn in HTML5 canvas
body: <p>I am trying to draw a graph using HTML5 canvas element. The graph consists of vertices and edges connecting these vertices. I'm representing the vertices by small circles and edges by lines connecting the circles.</p>
  
  <p>In my project, I want to change the position of vertices, when a 'Next' button is pressed. Shown below is a state of the canvas when the page is first loaded:</p>
  
  <p><img src="https://i.stack.imgur.com/mwaVi.png" alt="enter image description here"></p>
  
  <p>When the 'Next' button is clicked the graph is redrawn, based on the new coordinates of the vertices. However, there seems to be a error with the rendering as shown below:</p>
  
  <p><img src="https://i.stack.imgur.com/PTngK.png" alt="enter image description here"></p>
  
  <p>Strangely, I am not using the fill() functions anywhere, so I am not able to understand why the filled portion is coming. Following is the code for draw() function that is used for drawing the graph:</p>
  
  <pre><code>function draw(position)
  {
      var canvas_elem = document.getElementById('drawing');
  
      // Check the element is in the DOM and the browser supports canvas
      if(canvas_elem.getContext)
      {
          // Initaliase a 2-dimensional drawing context
          var canvas = canvas_elem.getContext('2d');
  
          // Clear canvas
          canvas.clearRect(0, 0, canvas_elem.width, canvas_elem.height);
  
          var data = data_array[num_vertices+1+position].split(",");
  
          // Draw all vertices
          for( var i=0; i&lt;num_vertices; i++)
          {
              canvas.arc(data[2*i], data[2*i+1], radius, 0, 2 * Math.PI, false);
              canvas.fillStyle = 'black';
              canvas.fill();
          }
  
          // Connect vertices by lines according to adjacency matrix
          for(var i=0;i&lt;num_vertices; i++)
          {
              for(var j=i; j&lt;num_vertices; j++)
              {
                  if(adjacency[i][j]==1)
                  {
                      canvas.beginPath();
                      canvas.moveTo(data[2*i],data[2*i+1]);
                      canvas.lineTo(data[2*j],data[2*j+1]);
                      canvas.stroke();
                  }
              }
          }
      }
      else
      {
          alert("Please use an HTML5 compatible browser.");
      }
  }
  </code></pre>
  
  <p>Any leads on what might be happening here? </p>
  
  <hr>
  
  <p>Take following values of these variables for debugging:</p>
  
  <pre><code>data_array=[
  "10",
  "0,1,1,0,0,0,0,0,0,0",
  "1,0,0,1,0,0,0,0,0,1",
  "1,0,0,0,1,0,0,0,0,1",
  "0,1,0,0,0,1,0,0,1,1",
  "0,0,1,0,0,0,1,0,1,1",
  "0,0,0,1,0,0,0,1,1,0",
  "0,0,0,0,1,0,0,1,1,0",
  "0,0,0,0,0,1,1,0,0,0",
  "0,0,0,1,1,1,1,0,0,0",
  "0,1,1,1,1,0,0,0,0,0",
  "10,2,35.4,23.3,88.9,100,210,350,70,500,412,208,336,112,45,32,89,92,102,23",
  "30,4,19.4,35.3,80.9,90,230,310,120,440,400,220,330,105,40,29,80,89,90,18"
  ]
  
  num_vertices=10
  </code></pre>