Quadratic curves

(Picture taken from the HTML5 Canvas Tutorials Web site)

Quadratic curves are defined by a starting point (called a "context point"), a control point, and an ending point. The curve fits the tangents between the context and control points and between the control and ending points.

The context point may be defined by a call to the moveTo(x, y) method of the context, or it may be the ending point of a previous path, if we're drawing a path made of several shapes. For example, drawing a line and a quadratic curve will make the endpoint of the line the context point for the quadratic curve.

The control point controls the curvature - if we move the control point farther we get a sharper curve.

Typical use

context.moveTo(contextX, contextY);

context.quadraticCurveTo(controlX, controlY, endX, endY);

// Optional : set lineWidth and stroke color

context.lineWidth = 5;

context.strokeStyle = "#0000ff";

// Draw!

context.stroke();

Examples

Example #1: quadratic curve

Source code:

var canvas=document.querySelector('#myCanvas1');

var context=canvas.getContext('2d');

context.beginPath();

context.moveTo(100, 20);

context.quadraticCurveTo(230, 200, 250, 20);

context.lineWidth = 5;

context.strokeStyle = "#0000ff";

context.stroke();

We set a starting point in line 6: moveTo(...), then set the control and ending points with a call to quadraticCurve(...), at line 7, then set some properties for color, thickness, and finally we call the stroke() method for drawing the curve.

Example #2: lines connected with a quadratic curve

Try this: