'Connect two HTML elements with smooth edges

I want to draw a figure like this.

I have used the Canvas to draw the line but failed to draw custom lines.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <title>Line Joining</title>
 </head>
 <body>
 <canvas id="DemoCanvas" width="400" height="400"></canvas>  
<script>
var canvas = document.getElementById('DemoCanvas');
if (canvas.getContext) 
{
   var ctx = canvas.getContext("2d");
   var lStart = 50;
   var lEnd = 200;
   var yStart = 20;
   ctx.beginPath();
   ctx.lineWidth = 25;

// Use a round corner.             
   ctx.beginPath();
   ctx.lineJoin = "round";
   ctx.moveTo(50, 140);
   ctx.lineTo(150, 140);
   ctx.lineTo(150, 260);
   ctx.stroke();

 }
</script>
</body>
</html>

I have also tried jQuery draggable and achieved results as figure below.

Kindly suggest me how these type of figures can be drawn using HTML and jQuery/JavaScript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Connect two HTML elements with smooth edges

Sources

Related Questions