Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 41

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.

Drawing lines
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.

TABLE 1-6 Methods for drawing lines

Method Description

Resets/begins a new drawing path

beginPath

Moves the context to the point set in the beginPath method moveTo

Sets the destination end point for the line lineTo

Strokes the line, which makes the line visible

stroke

With that information, in its simplest form, you can draw a line across your canvas like this:

ctxt.beginPath();
ctxt.moveTo(10, 10);
ctxt.lineTo(225, 350);
ctxt.stroke();

This code produces the line on the canvas shown in Figure 1-27.

FIGURE 1-27 A line drawn on the canvas