HTML and CSS Reference
In-Depth Information
Setting the line appearance
The context has a number of properties that change the appearance of subsequently drawn lines.
Changing these properties does not affect previously drawn lines. Other than clearing them or drawing on
them, there is no way to affect lines and fills that have already been drawn.
The most common line style properties you use are the color and width of the line:
strokeStyle
: This property is used for setting the line color. The value can be a color value
(CSS-style string), a gradient object, or a pattern object. By default, the line color is black:
"#000000"
.
lineWidth
: This sets the line thickness from the path. So if using the default value of 1, the line
width would extend a half-pixel to both sides; you cannot draw the line inside or outside of this
path.
lineWidth
must be a positive number.
There are some additional line style properties, but we just use their default values in this topic:
lineCap
: How the end point of each line is drawn, if it's flat, round, or sticks out. Possible values
are
butt
,
round
, and
square
, with
butt
as the default.
lineJoin
: Determines how connecting segments are joined together, or how the “elbow” of the
connection is drawn. Possible values are
round
,
bevel
, or
miter
, with
miter
as the default.
miterLimit
: When used with
lineJoin
set to
miter
, this property determines how far the
outside connection point will be placed from the inside connection point. It must be a finite
number greater than 0, and the default value is 10.
To jump between different styles, use the methods
context.save()
and
context.restore()
.
context.save()
pushes the current state of the canvas onto a stack. This includes styles, such as
strokeStyle
and
fillStyle
, and also transformations that have been applied to the canvas. Additional
style changes will be applied to subsequent draw commands. To return to the previous canvas state, call
context.restore()
to pop the current state off the stack and use the next one.
Drawing paths with lineTo and moveTo
There are a couple of different ways to implement line drawing in a graphics language. One is to have a
line
command that takes a starting point and an ending point, and draws a line between them. The other
way is to have a
lineTo
command that takes a single point: the ending point of the line. This is how the
canvas drawing API works, and it stores this information in a path.
The canvas context always has a current path, and there is only one current path. A path has 0 or more
sub-paths, each consisting of a list of points connected by straight or curved lines. A closed path is one
where its last point is connected to its first point by a straight line. To indicate that you're starting a new
drawing path, call
context.beginPath()
. Because a path is just a list of positions for a line, to render it to
the canvas you call
context.stroke()
.
You move the path's position around on the canvas and draw lines
to
it. Because we need to start
somewhere to draw
from
, we first move to point 0, 0 in this example:
