HTML canvas quadraticCurveTo()
Method
Example
Draw a quadratic Bézier curve:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20);
ctx.stroke();
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the quadraticCurveTo()
method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas>
element.
Definition and Usage
The quadraticCurveTo()
method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve.
A quadratic Bézier curve requires two points. The first point is a control point used in the quadratic Bézier calculation and the second point is the endpoint of the curve. The starting point of the curve is the current path's last point. If the path does not exist, use the beginPath() and moveTo() methods to define a starting point.
- Starting point:
moveTo(20, 20)
- Control point:
quadraticCurveTo(20, 100, 200, 20)
- Ending point:
quadraticCurveTo(20, 100, 200, 20)
Tip: See the bezierCurveTo() method. It has two control points instead of one.
| JavaScript Syntax: | context.quadraticCurveTo(cpx, cpy, x, y);
|
| --- | --- |
Parameter Values
Parameter | Description |
---|---|
cpx | The x coordinate of the Bézier control point. |
cpy | The y coordinate of the Bézier control point. |
x | The x coordinate of the endpoint. |
y | The y coordinate of the endpoint. |