Анимация точки bezier-curve из слайдера

var slider1 = document.getElementById("myRange");
var demo = document.getElementById("demo");
demo.innerHTML = slider1.value;
 
slider1.oninput = function() {
  demo.innerHTML = this.value;
}
 
var slider2 = document.getElementById("myRange2");
var output = document.getElementById("demo2");
output.innerHTML = slider2.value;
 
slider2.oninput = function() {
  output.innerHTML = this.value;
}
 
 
    var speed1 = +$("#myRange").val();
    var speed2 = +$("#myRange2").val();
    
var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
 
var c1 = {
  x: 50,
  y: 300,
  r: 10
}
 
var c2 = {
  x: 550,
  y: 300,
  r: 10
}
 
function draw() {
  ctx.beginPath();
  ctx.arc(c1.x, c1.y, c1.r, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#003300';
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(c2.x, c2.y, c2.r, 0, 2 * Math.PI, false);
  ctx.fillStyle = 'blue';
  ctx.fill();
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#003300';
  ctx.stroke();
 
  var dx = c2.x - c1.x;
  var dy = c2.y - c1.y;
  
  ctx.beginPath();
  ctx.moveTo(c1.x, c1.y);
  ctx.bezierCurveTo(c1.x + dx * 0.33, c1.y, c1.x + dx * 0.67, c2.y, c2.x, c2.y);
  ctx.stroke();
}
 
draw();
 
var mouseIsDown = false;
 
canvas.onmousedown = function(e) {
  mouseIsDown = true;
}
 
canvas.onmouseup = function(e) {
  mouseIsDown = false;
}
 
canvas.onmousemove = function(e) {
  if (!mouseIsDown) return;
 
  ctx.clearRect(0, 0, 600, 600);
 
  c1.x = e.clientX;
  c1.y = e.clientY;
 
  draw();
}
    
     document.getElementById("stopwatch").value=cur;