HTML canvas quadraticCurveTo() Method
Last Updated :
09 Jun, 2023
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
Share your thoughts in the comments
Please Login to comment...