Using the arcTo method

by Andrea Bogazzi

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo -->

<canvas id="canvas"></canvas>

JavaScript

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

ctx.beginPath();
ctx.moveTo(150, 20);
ctx.arcTo(150, 10, 10, 10, 30);
ctx.lineTo(50, 20)
ctx.stroke();

ctx.fillStyle = 'blue';
// starting point
ctx.fillRect(150, 20, 10, 10);

ctx.fillStyle = 'red';
// control point one
ctx.fillRect(150, 100, 10, 10);
// control point two
ctx.fillRect(50, 20, 10, 10);