Servage Magazine

Let’s take a deeper look at some of the other methods we can use to draw paths on the canvas, including arcs and curves that can be combined to create complex images.

Arcs

There are four functions we can use to draw arcs and curves onto the canvas. An arc can be a complete circle or any part of a circle.

context.arc()

Here is context.arc() in action:

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

The x and y values define the center of our circle, and the radius will be the radius of the circle upon which our arc will be drawn. startAngle and endAngle are in radians, not degrees. anticlockwise is a true or false value that defines the direction of the arc.

For example, if we want to draw a circle with a center point at position 100,100 and with a radius of 20, as shown in Figure 2-4, we could use the following code for the contents of drawScreen():

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);

The below example llustrates the code necessary to create a simple circle: A circle arc

function drawScreen() {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 5;
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
//full circle
context.stroke();
context.closePath();
}

Notice that we have to convert our start angle (0) and our end angle (360) into radians by multiplying them by (Math.PI/180). By using 0 as the start angle and 360 as the end, we create a full circle.

We can also draw a segment of a circle by not specifying the entire 0 to 360 start and stop angles. This code for drawScreen() will create one-quarter of a circle drawn clockwise, as shown in the example.

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

If we want to draw everything but the 0–90 angle, as shown in Figure 2-6, we can employ the anticlockwise argument and set it to true:

context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

context.arcTo()

Here is context.arcTo() in action: context.arcTo(x1, y1, x2, y2, radius)

The arcTo method has been implemented only in the latest browsers—perhaps because its capabilities can be replicated by the arc() function. It takes in a point (x1,y1) and draws a straight line from the current path position to this new position. Then it draws an arc from that point to the y1,y2 point, using the given radius.

The context.arcTo method will work only if the current path has at least one subpath. So, let’s start with a line from position 0,0 to position 100,200. Then we will build our small arc. It will look a little like a bent wire coat hanger (for lack of a better description), as shown in the example:

context.moveTo(0,0);

context.lineTo(100, 200);

context.arcTo(350,350,100,100,20);

Bezier Curves

Bezier curves, which are far more flexible than arcs, come in both the cubic and quadratic types:

• context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

• context.quadraticCurveTo(cpx, cpy, x, y)

The Bezier curve is defined in 2D space by a “start point,” an “end point,” and one or two “control” points, which determine how the curve will be constructed on the canvas.

A normal cubic Bezier curve uses two points, while a quadratic version uses a single point.

The quadratic version, shown in Figure 2-8, is the simplest, needing only the end point (last) and a single point in space to use as a control point (first):

context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);

This curve starts at 0,0 and ends at 0,50. The point in space we use to create our arc is 100,25. This point is roughly the center of the arc vertically. The 100 value for the single control point pulls the arc out to make an elongated curve.

The cubic Bezier curve offers more options because we have two control points to work with. The result is that curves—such as the classic “S” curve shown in the below example—are  easier to make:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

Sources for Further Reading

• W3 Schools
• Mozilla Developer