html tutorial - quadraticCurveTo() Method in HTML5 Canvas - html5 - html code - html form

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

Syntax for quadraticCurveTo() Method in HTML5 Canvas:

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

Parameter values for quadraticCurveTo() Method in HTML5 Canvas:

Parameter	Description
cpx	The x-coordinate of the Bezier control point.
cpy	The y-coordinate of the Bezier control point.
x	The x-coordinate of the ending point.
y	The y-coordinate of the ending point.

Sample Coding for quadraticCurveTo() Method in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy quadraticCurveTo method</title>
    </head>
    <body>
        <h2>wikitechy quadraticCurveTo method</h2>
        <canvas id="wikitechyCanvas" width="300" height="150"                        
          style="border:1px solid blue;">
        </canvas>
        <script>
            var c = document.getElementById("wikitechyCanvas");
            var context = c.getContext("2d");
            context.beginPath();
            context.moveTo(20, 40);
            context.quadraticCurveTo(30, 100, 200, 30);
            context.stroke();
        </script>
    </body>
</html>

Code Explanation for quadraticCurveTo() Method in HTML5 Canvas:

quadraticCurveTo() Method in HTML5 canvas Code Explanation

“wikitechyCanvas” is declare id value of the HTML canvas.
The getElementById() method is used to get the element with the specific id (“wikitechyCanvas”).
The beginPath() method is used to begins a path.
The moveTo() method is used to moves the path to the specified point (20,40) in the canvas.
A quadratic parametric curve requires two points. The first point is a control point (30,100) that is used in the quadratic parametric calculation and the second point is the ending point (200,30) for the curve.
The stroke() method is used to draws a path by using moveTo() and quadraticCurveTo() methods.