The quadratic curve requires ending and control points and starting points will be current point. If current point is not defined then you can use the beginPath and moveTo methods to set a starting point.
We use the quadraticCurveTo method to draw a quadratic curve.
ctx.quadraticCurveTo(cpx1, cpy1, x, y);
x and y are the control points and cpx1 and cpy1 are the control points.
Examples
The following code example uses quadraticCurveTo to draw an arc.
<html>
<head>
<title>Draw Arc</title>
<style type="text/css">
#MyCanvas {border:1px solid black;}
</style>
<script type="text/javascript">
function drawGradient() {
var ctx;
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
ctx = canvas.getContext("2d");
// Draw a quadratic curve .
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "black";
ctx.moveTo(100, 150);
ctx.quadraticCurveTo(150, 50, 250, 150);
ctx.stroke();
}
}
</script>
</head>
<body onload="drawGradient();">
<canvas id="MyCanvas" width="300" height="200">
This browser or document mode doesn't support canvas object</canvas>
</body>
</html>