Bezier Curve Simulation using HTML Canvas

Bezier Curve Simulation using HTML Canvas

HTML

<div class="canvasBox">
  <canvas id="canvas" width="800" height="600"></canvas>
  <div id="h1" draggable="true" ondrag="move(event)" class="handler one"></div>
  <div id="h2" draggable="true" ondrag="move(event)" class="handler two"></div>
</div>

CSS

html,
body {
  background-color: #eee;
  width: 100%;
  overflow-x: hidden;
}

#canvas {
  background-color: #fff;
  margin: 10px auto;
  display: block;
  box-shadow: 3px 3px 1px 3px rgba(0, 0, 0, 0.1);
}

.canvasBox {
  position: relative;
  width: 800px;
  height: 800px;
}

.handler {
  position: absolute;
  width: 10px;
  height: 10px;
  overflow: hidden;
  border: 3px solid #FF9800;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}

.handler.one {
  left: 200px;
  top: 100px;
}

.handler.two {
  left: 600px;
  top: 500px;
}

JavaScript

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

var points = [200, 100, 600, 500];


var makeArc = function() {
  context.strokeStyle = '#F44336';
  context.setLineDash([]);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.lineWidth = 3;
  context.beginPath();
  context.moveTo(50, 50);
  context.bezierCurveTo(points[0], points[1], points[2], points[3], 182,187.5);
  context.stroke();

  context.strokeStyle = '#FFEB3B';
  context.setLineDash([5]);
  context.lineWidth = 1;
  context.beginPath();
  context.moveTo(100, 300);
  context.lineTo(points[0], points[1]);
  context.moveTo(points[2], points[3]);
  context.lineTo(700, 300);
  context.stroke();

  context.fillText('100, 300', 80, 320);
  context.fillText('100, 300', 700, 320);
  context.fillText(points[0] + ',' + points[1], points[0] + 10, points[1]);
  context.fillText(points[2] + ',' + points[3], points[2] + 10, points[3]);
};
makeArc();

var move = function(event) {
  if (event.clientX > 0 && event.clientY > 0) {
    event.target.style.left = event.clientX + 'px';
    event.target.style.top = event.clientY + 'px';

    if (event.target.id == 'h1') {
      points[0] = event.clientX;
      points[1] = event.clientY;
    } else {
      points[2] = event.clientX;
      points[3] = event.clientY;
    }

    makeArc();
  }
};