HTML canvas quadraticCurveTo()
Method
Example
Draw a quadratic Bézier curve:
JavaScript:
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 last point in the current path. If the path does not exist, use the beginPath()
and moveTo()
methods to define a starting point.
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. |