HTML Canvas - quadraticCurveTo() Method

Quiz

The HTML Canvas quadraticCurveTo() method of CanvasRenderingContext2D interface is used to add a quadratic Bezier curve to the current path in Canvas element.

It takes one control point and one end point as parameters to the method and uses the point co-ordinates to draw a quadratic curve onto the Canvas element.

Syntax

Following is the syntax of HTML Canvas quadraticCurveTo() method −

CanvasRenderingContext2D.quadraticCurveTo(p1x, p1y, x, y);

Parameters

Following is the list of −

S.No	Parameter & Description
1	p1x x co-ordinate of the first control point.
2	p1y y co-ordinate of the first control point.
3	x x co-ordinate of the end point.
4	y y co-ordinate of the end point.

Return Value

Upon calling the method, a quadratic Bezier is added to the current path inside the Canvas element.

Example 1

The following example adds a quadratic curve to the current path using HTML Canvas quadraticCurveTo() method.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(50, 50);
      context.quadraticCurveTo(50, 225, 200, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

Example 2

The following example draws a quadratic Bezier curve on the Canvas element by context object using quadraticCurveTo() method

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.lineWidth = 5;
      context.beginPath();
      context.moveTo(70, 50);
      context.quadraticCurveTo(200, 125, 100, 150);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

Output

The output returned by the above code on the webpage as −

html_canvas_paths.htm

Print Page