Easy Tutorial
❮ Prop Nav Useragent Prop Document Documentelement ❯

HTML canvas quadraticCurveTo() Method

Canvas Object

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.

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.

Canvas Object

❮ Prop Nav Useragent Prop Document Documentelement ❯