title: How to draw line between two circle in html canvas element
body: <p>I am a beginner to HTML canvas and i am trying to create a design where i can create a horizontal line between two circle here is the canvas that i wanted until now i cant figure out how do i join this two circle with a line  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Script to draw the canvas 
  var canvas1 = document.getElementById("c1");
  var canvasobj = canvas1.getContext("2d");
  canvasobj.lineWidth = 10;
  canvasobj.beginPath();
  canvasobj.strokeStyle = "red";
  canvasobj.fillStyle = "orange";
  canvasobj.arc(100, 100, 60, 0, 2 * Math.PI);
  canvasobj.moveTo(100, 0);
  canvasobj.lineTo(100, 240);
  canvasobj.stroke();
  canvasobj.fill();
  canvasobj.beginPath();
  canvasobj.moveTo(5000, 0);
  canvasobj.lineTo(0, 0);
  canvasobj.stroke();
  canvasobj.beginPath();
  canvasobj.arc(500, 100, 60, 0, 2 * Math.PI);
  canvasobj.moveTo(500, 0);
  canvasobj.lineTo(500, 240);
  canvasobj.stroke();
  canvasobj.fill();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="c1" class="drawncanvas" width="1500" height="500" style="border:1px solid red;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JS Fiddle Link : <a href="https://jsfiddle.net/daz_001/kvw4n9pu/" rel="nofollow noreferrer">https://jsfiddle.net/daz_001/kvw4n9pu/</a></p>