Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
32
CHAPTER 2 ■ USING THE HTML5 CANVAS API
Figure 2-3. Diagonal line on a canvas
Triumph! Although this simple line may not appear to be the start of a revolution, keep in mind that
drawing a diagonal line between two arbitrary points using classic HTML techniques was a very difficult
maneuver involving stretched images, strange CSS and DOM objects, or other forms of black magic. Let
us never speak of them again.
As you can see from this example’s code, all operations on the canvas are performed via the context
object. This will hold true for the rest of your interaction with the canvas because all the important
functions with visual output are accessible only from the context, not the canvas object itself. This
flexibility allows the canvas to support different types of drawing models in the future, based on the type
of context that is retrieved from the canvas. Although we will frequently refer in this chapter to actions
we will take on the canvas, keep in mind that this actually means that we will be working with the
context object that the canvas supplies.
As demonstrated in the previous example, many operations on the context do not immediately
update the drawing surface. Functions such as beginPath, moveTo, and lineTo do not modify the canvas
appearance immediately. The same is true of many functions that set the styling and preferences of the
canvas. Only when a path is stroked or filled does it appear on the display. Otherwise, the canvas will
only be immediately updated when images are displayed, text is shown, or rectangles are drawn, filled,
or cleared.
Applying Transformations to Drawings
Now let’s look at another way to draw on the canvas using transformation. In the following example, the
result is identical to the previous example, but the code used to draw the diagonal line is different. For
this simple example, you could argue that the use of transformation adds unnecessary complexity.
However, you can think of using transformation as a best practice for more complex canvas operations
and you’ll see that we’ll use it a lot throughout the remaining examples, and it is critical to
understanding the HTML5 Canvas API’s complex capabilities.
Perhaps the easiest way to think of the transformation system—at least, the easiest way that does
not involve a great amount of mathematical formulae and hand-waving—is as a modification layer that
sits between the commands you issue and the output on the canvas display. This modification layer is
always present, even if you choose not to interact with it.