b-dRAWINGcURVES

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>drawing arcs</title>
</head>

<body>

<canvas id="myCanvas" width="640" height="480" style="boarder:1px solid black";>
</canvas>

<script>

var canvas = document.getElementById("myCanvas");
var drawingTools =canvas.getContext("2d");

drawingTools.strokeStyle = "blue";
drawingTools.lineWidth = 5;

//stroke a simple bezier curve
    drawingTools.beginPath();
    drawingTools.moveTo(50,200);
    drawingTools.bezierCurveTo(50,300,200,100,200,150);
    drawingTools.stroke();

//draw control lines above bezier curve.
    drawingTools.strokeStyle = "red";
    drawingTools.lineWidth = 1;
    drawingTools.beginPath();
    drawingTools.moveTo(50,200);
    drawingTools.lineTo(50,300);
    drawingTools.lineTo(200,100);
    drawingTools.lineTo(200,150);
    drawingTools.stroke();

//stroke a quadratic curve(a parabolaoala.)]
    drawingTools.strokeStyle = "greeN";
    drawingTools.lineWidth = 5;
    drawingTools.beginPath();
    drawingTools.moveTo(400,200);
drawingTools.quadraticCurveTo(500,100,600,150);
    drawingTools.stroke();

//draw control lines above bezier curve.
    drawingTools.strokeStyle = "red";
    drawingTools.lineWidth = 1;
    drawingTools.beginPath();
    drawingTools.moveTo(400,200);
    drawingTools.lineTo(500,100);
    drawingTools.lineTo(600,150);
    drawingTools.stroke();

</script>
</body>

</html>