Summary -

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.

Syntax -

context.quadraticCurveTo(cpx,cpy,x,y);

The following table describes the parameter values of the quadratic method -

Parameter Description
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 –

Method Description
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>

Output -

Your browser does not support the HTML5 canvas tag.

Browser Support

The following browsers with versions in the table indicates the initial browser version that completely supports the quadaraticcurveTo() method -

Method Chrome Edge Firefox Safari Opera
quadaraticcurveTo() Yes 9.0 and above Yes Yes Yes