Search within TutorialsPark

HTML5 Canvas Curves

Use Canvas methods to draw Bezier and Quadratic Curves.

Bezier Curves:bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

To draw a Bezier Curve on your canvas use method bezierCurveTo(cx1, cy1, cx2, cy2, x, y) .

1.Here (cx1, cy1) and (cx2, cy2) denote the two control points.

2.(x, y) :denotes the point to which the curve is to be created.

3. The start of the curve runs parallel to (cx1, cy1) and end of the curve runs parallel to (cx2, cy2).

4. The shape of the curve depends upon the distance between these control points.

Example:Bezier curve using method bezierCurveTo().

Give it a TRY! »

Quadratic Curve:quadraticCurveTo(cx, cy, x, y).

1.A Quadratic Curve can be drawn using the canvas method quadraticCurveTo(cx, cy, x, y).

2.Unlike Bezier curve, a Quadratic Curve has a single control point (cx, cy).

3.(x, y) denotes the points along which the curve will be created.

4. Shape of the curve depends upon the angle between the tangents form the control point to the start and end point of the curve.

Example:Quadratic Curve using quadraticCurveTo().

Give it a TRY! »

Related Examples

Related Tags