Drawing on the Canvas - HTML5 Canvas - page 30

• The current values for canvas attributes, such as (but not limited to):
— globalAlpha
— globalCompositeOperation
— strokeStyle
— textAlign , textBaseline
— lineCap , lineJoin , lineWidth , miterLimit
— fillStyle
— font
— shadowBlur , shadowColor , shadowOffsetX , and shadowOffsetY
We will cover these states later in this chapter.
What's Not Part of the State?
The current path (which we will explore later in this chapter) and current bitmap (see
Chapter 4 ) being manipulated on the Canvas context are not part of the saved state.
This very important feature will allow us to draw and animate individual objects on
the canvas. The section “Simple Canvas Transformations” on page 41 utilizes the
Canvas state to apply transformations to only the current shape being constructed and
drawn, leaving the rest of the canvas not transformed.
How Do We Save and Restore the Canvas State?
To save (push) the current state to the stack, call:
context.save()
To restore the canvas by “popping” the last state saved to the stack, use:
context.restore()
Using Paths to Create Lines
Paths are a method we can use to draw any shape on the canvas. A path is simply a list
of points, and lines to be drawn between those points. A Canvas context can only have
a single “current” path, which is not stored as part of the current drawing state when
the context.save() method is called.
Context for paths is a critical concept to understand, because it will enable you to
transform only the current path on the canvas.