HTML5 Canvas, 2nd Edition

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 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, ...