HTML5 Canvas, 2nd Edition

The Canvas State

When we draw on the Canvas context, we can make use of a stack of so-called drawing states. Each of these states stores data about the Canvas context at any one time. Here is a list of the data stored in the stack for each state:

• Transformation matrix information such as rotations or translations using the context.rotate() and context.setTransform() methods

• The current clipping region

• The current values for canvas attributes, such as (but not limited to):

  • globalAlpha

  • globalCompositeOperation

  • strokeStyle

  • textAlign, textBaseline

  • lineCap, lineJoin, lineWidth, and miterLimit

  • fillStyle

  • font

  • shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

We will cover these states later in this chapter.