The simple Beziers with 3 controll points.

Beziers3points.html

<canvas id="canvasElement" style="border: 1px solid black;"></canvas>
<script>

setup(); gameLooping = setInterval(loop, 0);

////////////////////////////////////////////////////////////

var gameLooping, canvas, context, mouseX, mouseY, PI2, controlCircles, cirlce;

////////////////////////////////////////////////////////////

function setup () {
	canvas = document.getElementById('canvasElement');
	context = canvas.getContext('2d'); circle = null;
	canvas.width = canvas.height = 700; PI2 = Math.PI * 2;
	canvas.addEventListener('mousedown', mousedownHandler);

	controlCircles = [{x: 100, y: 100}, {x: 400, y: 300}, {x: 300, y: 500}];
}

////////////////////////////////////////////////////////////

function loop () {
	clearCanvas();

	drawCircles();
	drawLines();
	drawCurve();

	context.font = '15pt Verdana'
	context.fillText('Drag circles.', 25, 25);
}

////////////////////////////////////////////////////////////

function drawCurve () {
	context.beginPath();
	context.moveTo(controlCircles[0].x, controlCircles[0].y);
	context.quadraticCurveTo(
		controlCircles[1].x, controlCircles[1].y,
		controlCircles[2].x, controlCircles[2].y
	);
	context.stroke();
}

function clearCanvas () {
	canvas.width = canvas.height;
}

function drawCircles () {
	controlCircles.forEach(function (cirlce) {
		drawCircle(cirlce.x, cirlce.y, 6);
	});
}

function drawCircle (x, y, r, color) {
	context.beginPath();
	context.arc(x, y, r || 1, 0, PI2);
	context.fillStyle = color || 'black';
	context.fill();
}

function drawLines () {
	drawLine(controlCircles[0].x, controlCircles[0].y, controlCircles[1].x, controlCircles[1].y);
	drawLine(controlCircles[1].x, controlCircles[1].y, controlCircles[2].x, controlCircles[2].y);
}

function drawLine (x1, y1, x2, y2) {
	context.beginPath();
	context.moveTo(x1, y1);
	context.lineTo(x2, y2);
	context.stroke();
}

function mousemoveHandler (event) {
	var rect = canvas.getBoundingClientRect();
	mouseX = event.clientX - rect.left;
	mouseY = event.clientY - rect.top;

	if (circle !== null) {
		circle.x = mouseX;
		circle.y = mouseY;
	}
}

function mousedownHandler (event) {
	function mouseupHandler () {
		canvas.removeEventListener('mouseup', mouseupHandler);
		canvas.removeEventListener('mousemove', mousemoveHandler);
		circle = null;
	}

	mousemoveHandler(event);

	var dists = [
		Math.sqrt(Math.pow(mouseX - controlCircles[0].x, 2) + Math.pow(mouseX - controlCircles[0].x, 2)),
		Math.sqrt(Math.pow(mouseX - controlCircles[1].x, 2) + Math.pow(mouseX - controlCircles[1].x, 2)),
		Math.sqrt(Math.pow(mouseX - controlCircles[2].x, 2) + Math.pow(mouseX - controlCircles[2].x, 2))
	];

	if (circle === null && dists[0] < 6) circle = controlCircles[0];
	if (circle === null && dists[1] < 6) circle = controlCircles[1];
	if (circle === null && dists[2] < 6) circle = controlCircles[2];

	if (circle !== null) {
		canvas.addEventListener('mousemove', mousemoveHandler);
		canvas.addEventListener('mouseup', mouseupHandler);		
	}
}

</script>