HTML and CSS Reference
In-Depth Information
Starting and Ending a Path
The
beginPath()
function call starts a path, and the
closePath()
function call ends the
path. When you connect two points inside a path, it is referred to as a
subpath
. A
subpath is considered “closed” if the final point connects to the first point.
The current transformation matrix will affect everything drawn in this
path. As we will see when we explore the upcoming section on trans-
formations, we will always want to set the transformation matrix to the
identity (or reset) if we do not want any transformation applied to a path.
The Actual Drawing
The most basic path is controlled by a series of
moveTo()
and
lineTo()
commands, as
shown in
Example 2-2
.
Example 2-2. A simple line path
function drawScreen() {
context.strokeStyle = "black"; //need list of available colors
context.lineWidth = 10;
context.lineCap = 'square';
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath();
}
Figure 2-2
shows an example of this output.
Figure 2-2. A simple line path
Example 2-2
simply draws a 10-pixel-wide horizontal line (or stroke) from position
20,0 to position 100,0.
We have also added the
lineCap
and
strokeStyle
attributes. Let's take a brief look at
the various attributes we can apply to a line before we move on to some more advanced
drawing.
