HTML and CSS Reference
In the preceding code, you get a reference to your canvas element followed by a reference
to a “2d” context. The context is an object that provides the API methods you use to draw
on the canvas. Now, <canvas> supports only a 2d context, but you can expect to see a 3d
context in the future.
Having acquired a reference to the context, you can now start to look at the various
methods for drawing on your canvas.
At the most basic level, you can draw lines on the canvas with the 2d context object you are
referencing. The context object provides the following methods for drawing lines, as listed in
TABLE 1-6 Methods for drawing lines
Resets/begins a new drawing path
Moves the context to the point set in the beginPath method
Sets the destination end point for the line
Strokes the line, which makes the line visible
With that information, in its simplest form, you can draw a line across your canvas like this:
This code produces the line on the canvas shown in Figure 1-27.
FIGURE 1-27 A line drawn on the canvas