Drawing on the Canvas - HTML5 Canvas - page 34

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();
}