Easy Tutorial
❮ Html Httpmessages Av Prop Audiotracks ❯

HTML canvas quadraticCurveTo() Method

HTML canvas Reference Manual

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.
❮ Html Httpmessages Av Prop Audiotracks ❯