HTML and CSS Reference

In-Depth Information

Listing 4-4.
Setting the
lineWidth
and
lineCap
Properties

context.lineWidth = 10;

context.beginPath();

context.moveTo(20, 100);

context.lineTo(180, 100);

context.lineCap = "butt";

context.stroke();

context.beginPath();

context.moveTo(20, 120);

context.lineTo(180, 120);

context.lineCap = "round";

context.stroke();

context.beginPath();

context.moveTo(20, 140);

context.lineTo(180, 140);

context.lineCap = "square";

context.stroke();

In this listing, the width of the lines to be drawn is set to 10 pixels using the
lineWidth
property. Then

the code draws three lines by setting
lineCap
to
butt
,
round
, and
square
, respectively.

Notice the use of the
beginPath()
method, which begins a new drawing path. (Paths are covered in a

later section.) Here, suffice to say that a path is a series of drawing operations. If you don't call
beginPath()
,

all lines are redrawn with the last
lineCap
setting you specified (
square
in this example).

Notice how the last two lines in Figure 4-5 add extra pixels to the overall length, whereas the first line

is precisely drawn as per the start and end coordinates.

Drawing Curves

You can draw three types of curves on the canvas
:
arcs, quadratic curves, and Bezier curves. These three

types of curves are drawn using the
arc()
,
arcTo()
,
quadraticCurveTo()
, and
bezierCurveTo()
methods.

Drawing an arc is necessary in order to draw circles and rounded rectangles. You can probably do all the

drawing you need with
arc()
and
arcTo()
, but if you need something more complicated, you can

investigate quadratic and Bezier curves. The following sections discuss
arc()
and
arcTo()
.

A Quick Introduction to Radians

While working with arcs, you frequently come across angles specified in radians. The radian is the standard

unit of angular measurement and describes the ratio between the length of an arc of a circle and its radius.

One radian is defined as the angle subtended when the length of the arc of a circle is equal to the radius of

that circle. A radian is therefore equal to (Length of the arc / Radius of the arc).

The circumference of a circle is given by the formula 2πr, where r is the radius of the circle. A full circle

means 360° or 2πr/r—that is, 2π and 1 radian = (180/π)°. To convert radians to degrees, you need to

multiply a radian value by 180/π. Along the same lines, to convert degrees to radians, you multiply a degree

value by π/180.