(For more resources related to this topic, see here.)

Path drawing concepts

The process of drawing with a pen on paper can be broken down into the following steps:

1. You place your pen at a particular point on a piece of paper.
2. You press and move the pen freely from this point to another point.
3. You keep your pen at this point or lift up the pen and place it at another point on the paper.
4. he process is repeated until you have finished drawing.

Path drawing works in much the same way. The point at which you place your pen, known as the current point, defines the start of a path while the free movement of the pen describes the path itself.

Consider drawing an arbelos shape. We first place our pen at a point (100, 180) on our canvas and draw an arc to the point (380, 180) as shown:

We then create an arc from the point (380, 180) to the point (200, 180):

Finally, we create an arc back to the point (100, 180) to complete the path:

The example of the arbelos demonstrates the drawing of a single path, where we did not lift up the pen at any point during the drawing process. Were we to lift up the pen, the subsequent drawing would technically create subpaths on the main path element. In the example, creating a triangle as a subpath has the effect of adding to our single path element. Notice also that the fill attribute is applied to the overall path rather than individual subpaths:

Drawing Curves

There are three types of curve path: quadratic Bézier curves, cubic Bézier curves, and arcs. Bézier curves are curves defined between a start and end point but whose direction we can determine by using control points.

Drawing quadratic Bézier curves

A quadratic Bézier curve is a curve between two points with a single control point. To appreciate how quadratic Bézier curves are drawn, you should experiment with the animated demo at http://www.jasondavies.com/animated-bezier/. As shown here, the curve is drawn from a point P0 to a point P2 with a control point P1. The control point P1 relative to P0 and P2 determines the extent to which the curve bends: from start to finish, the curve starts off heading in the direction of the control point P1 and then bends towards the end point P2 from the direction of P1.

There are two quadratic Bézier curve commands, the syntax for which is given here:

The Q command (or q for relative points) describes a curve drawn from the current point on a path to the point (x, y) using (x1, y1) as a control point. For example, consider the following code:

paper.path(['M', 50, 150, 'Q', 225, 20, 400, 150]);

This draws the quadratic Bézier curve shown. The equivalent path using the lowercase variant of the command would be “M 50,150 q 175,-130 350,0”, where the (x, y) and (x1, y1) parameters are the relative distances from the start point (50, 100):

Moving the control point affects the way that the path is drawn. For example, the path “M 50, 150 Q 100,40 400,150” is shown as:

As with the other commands we have encountered so far, parameters can be repeatable, which allows us to draw multiple connected quadratic Bézier curves. Consider the following code:

paper.path([
    'M', 50, 150
    'Q', 225, 20, 400, 150,
    575, 20, 750, 150
]);

This has the effect of drawing a second curve from (400, 150) to the point (750, 150) with a control point at (575, 20):

The T or t command is shorthand whereby the control point coordinates are not specified. Instead, the control point is determined automatically as a reflection of the previous control point. Consider the path drawn by the following code:

paper.path([
    'M', 50, 150,
    'Q', 225, 20, 400, 150,
    'T', 750, 150 
]);

This creates two curves as shown in the following screenshot. The current point at the start of the path drawn by T is (400, 150). Relative to this point, a reflection of the previous control point (225, 20) is (575, 280):

Summary

In this article we have successfully covered a quadratic Bézier curve.

Resources for Article:

Further resources on this subject:

• Getting Started with Impressive Presentations [Article]
• So, what is EaselJS? [Article]
• Creating a Simple Application in Sencha Touch [Article]