HTML5 Canvas [15]
How Do We Save and Restore the Canvas State?
To save (push) the current state to the stack, call:
context.save()
To restore the canvas by “popping” the last state saved to the stack, use:
context.restore()
Using Paths to Create Lines
Paths are a method we can use to draw any shape on the canvas. A path is simply a list of points, and lines to be drawn between those points. A Canvas context can only have a single “current” path, which is not stored as part of the current drawing state when the context.save() method is called.
Context for paths is a critical concept to understand, because it will enable you to transform only the current path on the canvas.
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.
NOTE
The current transformation matrix will affect everything drawn in this path. As we will see when we explore the upcoming section on transformations, 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.
lineCap attributes
context.lineCap
The lineCap is the end of a line drawn on the context. It can be one of three values:
butt
The default; a flat edge that is perpendicular to the edge of the line.
round
A semicircle that will have a diameter that is the length of the line.
square
A rectangle with the length of the line width and the width of half the line width placed flat perpendicular to the edge of the line.
lineJoin attributes
context.lineJoin
The lineJoin is the “corner” that is created when two lines meet. This is called a join. A filled triangle is created at the join, and we can set its basic properties with the lineJoin Canvas attribute.
miter
The default; an edge is drawn at the join. The miterLimit is the maximum allowed ratio of miter length to line width (the default is 10).
bevel
A diagonal edge is drawn at the join.
round
A round edge is drawn at the join.
lineWidth
The lineWidth (default = 1.0) depicts the thickness of the line.
strokeStyle
The strokeStyle defines the color or style that will be used for lines and around shapes (as we saw with the simple rectangles in Example 2-2).
Examples of More Advanced Line Drawing
Example 2-3 shows these attributes in action; the results are depicted in Figure 2-3. There are a few oddities when drawing lines on the canvas, which we will point out along the way.
Example 2-3. Line cap and join
function drawScreen() {
// Sample 1: round end, bevel join, at top left of canvas
context.strokeStyle = "black"; //need list of available colors
context.lineWidth = 10;
context.lineJoin = 'bevel';
context.lineCap = 'round';
context.beginPath();