Graphic JavaScript

Back to index
At this point you've seen how to draw filled rectangles using the fillRect method and you've also seen how to draw unfilled rectangles using the rect and stroke methods. To help refresh your memory here are the methods just mentioned as they might appear in a JavaScript applet:


   ctx.fillRect(10, 30, 100, 10);
   ctx.rect(10,60,10,10);
   ctx.stroke();

The first line will draw a very wide and very short rectangle with its upper-left corner at (10,30). The next two lines work together to render a small square with its upper-left corner at (10,60).

EXAMPLE:
Inspect the code for the applet shown to the right. You will notice that only fillRects are used in the code. There are two ways of interpreting the array of squares rendered to the right:

Large cyan square with nine evenly spaced smaller squares drawn on top of it.
Large black square with eight long, narrow rectangles draw over it (four oriented horizontally and four oriented vertically).

ASSIGNMENT:
Using only one call to the fillRect method, recreate the applet displayed to the right. Keep in mind that the example actually makes ten calls to fillRect.