drawLine

by rafmaz

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>
<div class="block" onclick="drawLine()"></div>
<div class="block2" onclick="drawLine()"></div>

CSS

.block{
  border:3px solid yellow;
  position:absolute;
  top: 10px;
  left: 20px;
  width:30px;
  height:50px;
}
.block2{
  border:3px solid green;
  position:absolute;
  top: 110px;
  left: 120px;
  width:30px;
  height:50px;
}

JavaScript

function drawLine(){

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
var start = 20 + 25;
context.moveTo(start, 10);

// line 1
context.lineTo(start, 10);

// quadratic curve
context.quadraticCurveTo(230, 200, 250, 120);
// line 2
context.lineTo(500, 90);

context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();
}