Skip to content
Related Articles

Related Articles

Improve Article

HTML | canvas quadraticCurveTo() Method

  • Last Updated : 25 Jul, 2019

The canvas quadraticCurveTo() Method is used to create a quadratic curve on the canvas. The method adds a point to the current path by using the specified control points that represent the quadratic parametric curve.

Syntax:

context.quadraticCurveTo( cx, cy, x, y );

Parameters:

  • cx: This parameter holds the x-coordinate of the quadratic control point.
  • cy: This parameter holds the y-coordinate of the quadratic control point.
  • x: This parameter specifies the x-coordinate of the ending point.
  • y: This parameter specifies the y-coordinate of the ending point.

Example 1:




<!DOCTYPE HTML>
<html>
      
<head
    <title
        HTML canvas quadraticCurveTo() Method
    </title
</head
  
<body style="text-align:center;"
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1
      
    <h2>HTML canvas quadraticCurveTo() Method</h2
      
    <canvas id="GFG" width="500" height="300"></canvas
      
    <script>
        var geeks = document.getElementById('GFG');
        var context = geeks.getContext('2d');
        context.beginPath();
        context.moveTo(88, 120);
        context.quadraticCurveTo(288, 0, 388, 150);
        context.strokeStyle = 'green';
        context.stroke();
    </script>
</body
  
</html>                          

Output:



Example 2:




<!DOCTYPE HTML>
<html>
      
<head
    <title
        HTML canvas quadraticCurveTo() Method
    </title
</head
  
<body style="text-align:center;"
      
    <h1 style="color:green;">
        GeeksforGeeks
    </h1
      
    <h2>HTML canvas quadraticCurveTo() Method</h2
      
    <canvas id="GFG" width="500" height="300"></canvas
      
    <script>
        var geeks = document.getElementById('GFG');
        var context = geeks.getContext('2d');
        context.beginPath();
        context.moveTo(50, 50);
        context.quadraticCurveTo(50, 180, 340, 50);
        context.strokeStyle = 'green';
        context.lineWidth = 5;
        context.stroke();
    </script>
</body
  
</html>                              

Output:

Supported Browsers: The browsers supported by HTML canvas quadraticCurveTo() Method are listed below:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :