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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...