In this topic, we described about the Quadratic Curve with detailed example.
In html5 canvas, we can draw a Quadratic curve by using the quadraticCurveTo() method. This method adds the given point to the existing path, linked to the earlier one by a quadratic Bezier curve with the given control point.
In the quadraticCurveTo() method, the cpx and cpy are the coordinates of the control point and the x and y parameters are the coordinates of the endpoint.
The following table describes the parameter values of the quadratic method -
|cpx||The x-coordinate of the Bezier control point|
|cpy||The y-coordinate of the Bezier control point|
|mx||The x-coordinate of the ending point|
|y||The y-coordinate of the ending point|
To draw quadratic curves, we need the following methods –
|beginPath()||This method resets the existing path|
|moveTo(x, y)||This method establishes a new subpath with the provided point.|
|closePath()||This method indicates the existing subpath as closed and begins a new subpath with a point that is same as the ending point of the recently closed subpath.|
|fill()||Fills the subpaths with the present fill style.|
|stroke()||Strokes the subpaths with the present stroke style.|
|quadraticCurveTo(cpx, cpy, x, y)||This method improves the given point to the existing path, linked to the earlier one by a quadratic Bezier curve with the given control point. The x and y parameters are the coordinates of the end point in the quadraticCurveTo() method. cpx and cpy are the coordinates of the control point.|
Example -Below example describes about how to draw a quadratic curve on HTML5 Canvas.
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="250" height="100" style="border:2px solid #00d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(40, 40); ctx.quadraticCurveTo(-50, 100, 200, 20); ctx.stroke(); </script> </body> </html>
The following browsers with versions in the table indicates the initial browser version that completely supports the quadaraticcurveTo() method -
|quadaraticcurveTo()||Yes||9.0 and above||Yes||Yes||Yes|