title: How to connect circles with lines using canvas
body: <p>I am using canvas tag to create circles on over world map image. I want to connect the multiple circles with lines using Canvas tag. As of Now I am able to draw circles but couldn't able to draw lines. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;img src="http://educypedia.karadimov.info/library/worldoutlinemap.gif" width="500"/&gt;
  &lt;canvas id="myCanvas1" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;canvas id="myCanvas2" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;canvas id="myCanvas3" width="200" height="200"&gt;&lt;/canvas&gt;
  &lt;canvas id="myCanvas4" width="200" height="200"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#myCanvas1
  {
    position: absolute;
      top: 20px;
      left: 245px;
      z-index: 3;
  }
  #myCanvas2
  {
    position: absolute;
      top: 20px;
      left: 25px;
      z-index: 3;
  }
  
  #myCanvas3
  {
    position: absolute;
      top: 200px;
      left: 60px;
      z-index: 3;
  }
  
  #myCanvas4
  {
    position: absolute;
      top: 150px;
      left: 200px;
      z-index: 3;
  }
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>/* circle1 */
      var canvas = document.getElementById('myCanvas1');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'grey';
      context.fill();
      context.stroke();
      /* circle1 */  
  
      /* circle2 */
      var canvas = document.getElementById('myCanvas2');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'grey';
      context.fill();
      context.stroke();
      /* circle2 */
  
    /* circle3 */
      var canvas = document.getElementById('myCanvas3');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'grey';
      context.fill();
      context.stroke();
      /* circle3 */
  
    /* circle4 */
      var canvas = document.getElementById('myCanvas4');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 10;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'grey';
      context.fill();
      context.stroke();
      /* circle4 */
  </code></pre>
  
  <p><a href="https://jsfiddle.net/0t0hLju1/2/" rel="nofollow noreferrer">Fiddle</a></p>