Introduction to HTML5 Canvas - HTML5 Canvas - page 15

Here is the code for the console.log() functionality:
var Debugger = function () { };
Debugger.log = function (message) {
try {
console.log(message);
} catch (exception) {
return;
}
}
The 2D Context and the Current State
The HTML5 2D context (the CanvasRenderingContext2D object), retrieved by a call to
the getContext() method of the Canvas object, is where all the action takes place. The
CanvasRenderingContext2D contains all the methods and properties we need to draw
onto the canvas. The CanvasRenderingContext2D (or context, as we will call it hereafter)
uses a Cartesian coordinate system with 0,0 at the upper left and corner of the canvas,
and coordinates increasing in value to the left and down.
However, all of these properties and methods are used in conjunction with current
state , a concept that must be grasped before you can really understand how to work
with HTML5 Canvas. The current state is actually a stack of drawing states that apply
globally to the entire canvas. You will manipulate these states when drawing on the
canvas. These states include:
Transformation matrix
Methods for scale, rotate, transform, and translate
Clipping region
Created with the clip() method
Properties of the context
Properties include strokeStyle , fillStyle , globalAlpha , lineWidth , lineCap , line
Join , miterLimit , shadowOffsetX , shadowOffsetY , shadowBlur , shadowColor , global
CompositeOperation , font , textAlign , and textBaseline .
Don't worry; these should not look familiar to you just yet. We will discuss these prop-
erties in depth in the next three chapters.
Remember earlier in this chapter when we discussed immediate mode versus retained
mode? The canvas is an immediate mode drawing surface, which means everything
needs to be redrawn every time something changes. There are some advantages to this;
for example, global properties make it very easy to apply effects to the entire screen.
Once you get your head around it, the act of redrawing the screen every time there is
an update makes the process of drawing to the canvas straightforward and simple.
On the other hand, retained mode is when a set of objects is stored by a drawing surface
and manipulated with a display list. Flash and Silverlight work in this mode. Retained
mode can be very useful for creating applications that rely on multiple objects with