Introduction to HTML5 Canvas - HTML5 Canvas - page 31

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 Can-
vasRenderingContext2D 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 corner of the canvas, with coordinates
increasing in value to the right 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 ,
lineJoin , miterLimit , shadowOffsetX , shadowOffsetY , shadowBlur , shadowColor ,
globalCompositeOperation , font , textAlign , and textBaseline .
Don't worry; these should not look familiar to you just yet. We will discuss these properties
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 re-
drawn every time something changes. There are some advantages to this; for example, glob-
al 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 their own independ-
entstates.Manyofthesameapplicationsthatcouldmakefulluseofthecanvas(games,activ-