{"id":2006,"date":"2017-07-15T03:29:31","date_gmt":"2017-07-15T03:29:31","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=2006"},"modified":"2018-04-08T08:22:50","modified_gmt":"2018-04-08T08:22:50","slug":"javascript-quadratic","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/javascript-quadratic\/","title":{"rendered":"Drawing a Quadratic Curve"},"content":{"rendered":"

To draw a quadratic curve, we use the quadraticCurve()<\/strong> method. However, we need to combine the quadraticCurve() method with the beginPath()<\/strong> and moveTo()<\/strong> methods in order to draw a quadratic curve. The beginPath()<\/strong> and moveTo()<\/strong> methods define the starting point of the quadratic curve. The quadraticCurve()<\/strong> method is to define the lowest point to the end point of the quadratic curve. The syntax of the quadraticCurve()<\/strong> method is<\/p>\n

quadraticCurveTo(x1<\/sub>, y1<\/sub>, x2<\/sub>, y2<\/sub>)\r\n<\/pre>\n
*(x1<\/sub>, y1<\/sub>) is the lowest point.
\n*(x2<\/sub>, y2<\/sub>) is the end point.<\/p>\n
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.
\nPlease refer to our tutorial for further explanation on drawing graphics.
\nJavaScript Tutorial Lesson 31<\/a><\/p>\n
The code to draw a quadratic curve is as follows:<\/p>\n
<canvas id=”myCanvas” style=”border: 1px solid #d3d3d3;” width=”250″ height=”300″>
\n<\/canvas>
\n<input type=”button” value=”Draw Curve” Onclick=”DrawCurve()”>
\n<script>
\nfunction DrawCurve()
\n{
\nvar c = document.getElementById(“myCanvas”);
\nvar ctx = c.getContext(“2d”);
\nctx.beginPath();
\nctx.moveTo(20, 20);
\nctx.quadraticCurveTo(90, 400, 200, 20);
\nctx.stroke();
\n}
\n<\/script><\/p>\n
Please click on the Draw Curve button to view the output.<\/p>\n

\n<\/canvas>
\n
\n