(For more resources related to this topic, see here.)
The process of drawing with a pen on paper can be broken down into the following steps:
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:
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.
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:
Command | Parameters | Example |
Q or q | (x1, y1, x, y)+ | Q 100 50 200 250 |
T or t | (x y)+ | T 400 250 |
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):
In this article we have successfully covered a quadratic Bézier curve.
Further resources on this subject:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…