Quiero dibujar una figura como esta.

Utilicé el lienzo para dibujar la línea, pero no pude dibujar líneas personalizadas.
<!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> También probé jQuery arrastrable y obtuve resultados como la figura a continuación. 
Amablemente sugiérame cómo se pueden dibujar este tipo de figuras usando HTML y jQuery/JavaScript