Web Programming with html5, css, and JavaScript

5. 
[after Section 12.8] Implement a function that draws five filled-in circles like this:
To avoid code redundancy, you must use a loop.
6. 
[after Section 12.8] Add code to the Umbrella web page’s 
draw
function in order to display 
a right-side curved handle like this:
626
Chapter 12
 
Canvas

---

Do not change the existing code. Show where your added code gets positioned within the 
existing code. Hint: All you need to do is add one statement.
7. 
[after Section 12.9] The context object’s 
rect
method creates a rectangle using the same four 
parameters as 
strokeRect
—
x
, 
y
, width, and height. The difference is that the 
rect
method 
just creates the rectangle, but does not draw it. To draw it, you need to call 
stroke
and/or 
fill
. 
As with the 
lineTo
and 
arc
methods, if you call 
rect
as part of a path, to avoid connecting 
the path’s previous shape to the rectangle, you should call 
moveTo
before calling 
rect
. Rewrite 
the Face Web page’s 
initialize
function so that it uses the 
rect
method instead of the 
strokeRect
method. You are required to use only one path for the entire web page.
8. 
[after Section 12.10] Add expand and shrink buttons to the Moving Face web page. Your expand 
button should expand the face by the same amount as the shrink button shrinks it. So if you 
expand 
x
times, then shrink 
x
times, you should see the same face as you started with. Feel free 
to use the 
expand
function shown in Figure 12.17, but in your solution, you must improve the 
style. In particular, you must use named constants for the scale factors and inverse scale factors. 
There’s no need to submit code for the entire web page. Just submit code for the expand and 
shrink button elements and code for the expand and shrink event-handler functions.
9. 
[after Section 12.11] In the Moving Face web page, the 
moveUp
function calls the 
clearRect
method like this:
ctx.clearRect(0, 0, canvas.width, canvas.height);
In the web page’s 
body
container, you can see that the 
canvas
element has width and height 
attributes of 500 and 400 pixels, respectively. So in the 
clearRect
method call, we could 
have used 500 and 400 instead of 
canvas.width
and 
canvas.height
. Which technique 
is better and why?