0
128
ViewsConnect 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
·
Juan Pablo Isaza
Answer question