Refer Tutorial
Arc
<canvas id="arc" width="400" height="250"></canvas>
<script>
var canvas = document.getElementById('arc');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 50;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, false);
context.lineWidth = 20;
context.strokeStyle = '#e12a2b';
context.stroke();
</script>
Read the tutorial now
Quadratic Curve
<canvas id="qCurve" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('qCurve');
var context = canvas.getContext('2d');
//Create the path first
context.beginPath();
//Move to a position to create context point
context.moveTo(200, 150);
context.quadraticCurveTo(258, 0, 308, 160);
context.lineWidth = 20;
context.strokeStyle = '#e12a2b';
context.stroke();
</script>
Bezier Curve
<canvas id="bCurve" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('bCurve');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 130);
context.bezierCurveTo(180, 40, 400, 40, 360, 140);
context.lineWidth = 10;
context.strokeStyle = '#e12a2b';
context.stroke();
</script>