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
//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();<canvas id="c1" class="drawncanvas" width="1500" height="500" style="border:1px solid red;"></canvas>JS Fiddle Link : https://jsfiddle.net/daz_001/kvw4n9pu/