HTML5 Canvas [16]
context.moveTo(0, 0);
context.lineTo(25, 0);
context.lineTo(25,25);
context.stroke();
context.closePath();
// Sample 2: round end, bevel join, not at top or left of canvas
context.beginPath();
context.moveTo(10, 50);
context.lineTo(35, 50);
context.lineTo(35,75);
context.stroke();
context.closePath();
// Sample 3: flat end, round join, not at top or left of canvas
context.lineJoin = 'round';
context.lineCap = 'butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35,125);
context.stroke();
context.closePath();
}
Figure 2-3. Line cap and join
These three line and join samples should help illustrate some of the combinations of attributes we can use to draw paths on the canvas.
The first sample attempts to draw starting at the top left of the canvas, resulting in a strange image. Canvas paths are drawn outward in both the x and y directions from the center of the pixel it begins on. For this reason, the top line in Sample 1 seems to be thinner than the 10 pixels we specified. In addition, the “round” end of the top-left horizontal line segment cannot be seen because both of these were drawn off the screen in the “negative” value areas of the screen coordinates. Furthermore, the diagonal “bevel” at the lineJoin is not drawn.
Sample 2 rectifies the problems in Sample 1 by offsetting the beginning of the drawing away from the top left. This allows the entire horizontal line to be drawn, as well as the “round” lineCap and the “bevel” lineJoin.
Sample 3 shows us eliminating the extra lineCap in favor of the default “butt,” and changing the lineJoin to “round.”
Advanced Path Methods
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()
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 code below for the contents of drawScreen():
context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);
Example 2-4 illustrates the code necessary to create a simple circle.
Example 2-4. 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();
}
Figure 2-4. A basic circle arc
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 Figure 2-5:
context.arc(100, 200, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);
Figure 2-5. A one-quarter circle arc
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);
Figure 2-6. A three-fourths circle arc
context.arcTo()
context.arcTo(x1, y1, x2, y2, radius)
The arcTo method has only been implemented 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