To draw a quadratic curve, we use the quadraticCurve() method. However, we need to combine the quadraticCurve() method with the beginPath() and moveTo() methods in order to draw a quadratic curve. The beginPath() and moveTo() methods define the starting point of the quadratic curve. The quadraticCurve() method is to define the lowest point to the end point of the quadratic curve. The syntax of the quadraticCurve() method is
quadraticCurveTo(x1, y1, x2, y2)
*(x1, y1) is the lowest point.
*(x2, y2) is the end point.
Before we can draw a quadratic curve, we need to create a canvas by defining its width and height, using the <canvas> tag. Please note that <canvas> is an HTML5 tag that may not be supported by certain versions of browsers.
Please refer to our tutorial for further explanation on drawing graphics.
JavaScript Tutorial Lesson 31
The code to draw a quadratic curve is as follows:
<canvas id=”myCanvas” style=”border: 1px solid #d3d3d3;” width=”250″ height=”300″>
</canvas>
<input type=”button” value=”Draw Curve” Onclick=”DrawCurve()”>
<script>
function DrawCurve()
{
var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(90, 400, 200, 20);
ctx.stroke();
}
</script>
Please click on the Draw Curve button to view the output.