jQuery 1.4 Animation Techniques - Index of

Canvas Animations
For the next part of the flag, we need to draw a slightly thinner red cross over the white
cross. We'll use another path for this. We set the new color style and width, and draw a new
path across the center of the rectangle vertically and horizontally again.
To complete the flag, we need to add four more shapes to make the diagonal parts of the red
cross. We can't use straight-line paths for these because they don't intersect, and they are
all positioned slightly differently. This means that we have to draw them manually as custom
shapes and fill them.
These four shapes actually make up the majority of the code, but we're basically doing very
similar things as before. Each shape is made by drawing sub-paths and filling them. We use a
new path for each shape to preserve the anti-aliasing of the lines. If we used one big path for
all four shapes, the edges of the shapes would be jagged.
Pop quiz – drawing to the canvas
1. What arguments are required for the fillRect() method?
a. The x and y location of the rectangle
b. The width and height of the rectangle
c. The x and y location of the rectangle, its width and height, and its color
d. The x and y location of the rectangle, and its width and height
2. What method is required to make a path visible?
a. strokeStyle and lineWidth
b. moveTo() and lineTo()
c. stroke() or fill()
d. closePath()
Have a go hero – creating the flag of your nation
If you're not from the UK, have a go at drawing the flag of your own nation on the canvas.
We can create compositions of repeated shapes using standard JavaScript for loops, so use
this to your advantage in keeping the code required for your flag as minimal as possible.
If you are from the UK, try recreating a favorite logo or icon.
If part of your flag (or logo) is extremely complex, remember that we can draw images to
the as well as lines and shapes, so feel free to draw out the basic part of your
flag using the drawing methods, and then use an image for the complex part.
[ 276 ]