HTML and CSS Reference
In-Depth Information
redrawing the ball canvas onto the main canvas, but not before
the blanket clearing of the canvas with
ctx.clearRect(0, 0,
width, height)
, which is effectively resetting the entire effect.
So that's it. Animation. Probably most akin to a flip-book animation.
Saving and restoring drawing state
There is a little more hope built in to the 2D API: drawing state.
There are two methods on the context object:
save
and
restore
,
which manage the current stack of drawing states. The
save
method pushes the current state on to the stack, whereas
restore
pops from the top of the stack.
Drawing states don't cover everything you do to the canvas, but
they do include the following:
•
Transformations
•
Clipping regions (not covered in this topic)
•
The current values for the following attributes:
fillStyle
,
font
,
globalAlpha
,
globalCompositeOperation
,
lineCap
,
lineJoin
,
lineWidth
,
miterLimit
,
shadowBlur
,
shadowColor
,
shadowOffsetX
,
shadowOffsetY
,
strokeStyle
,
textAlign
, and
textBaseline
.
For example, the following code snippet from the Mozilla canvas
composition tutorial shows how it would draw 50 stars on a can-
vas in random positions. It sets the position using the
translate
method. But at the end of each iteration of the loop, it restores the
original state of the canvas, thus moving the top/left of the canvas
to the real top left, rather than in the position of the last
translate
:
for (var j=1;j<50;j++){
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75-Math.floor(Math.random()*150),
75-Math.floor(Math.random()*150));
drawStar(ctx,Math.floor(Math.random()*4)+2);
ctx.restore();
}
Note that save and restore do not affect the current paths or
current bitmap on the canvas (you can't restore to a previous
state of the image on the canvas).
