12.3 Rectangles Web Page

Take a look at the Rectangles web page in FIGURE 12.1. It displays four rectangles for the purpose of illustrating various drawing concepts. In examining the web page, we’ll describe how to draw a rectangle and specify its position, height, width, color, and border width.

FIGURE 12.1 Rectangles web page

FIGURE 12.2 shows the source code for the Rectangles web page. You can see that it includes the same body container that we presented in the previous section. Our primary focus will be the web page’s rectangleExamples function, which draws the four rectangles in the canvas drawing area.

FIGURE 12.2 Source code ...

Get Web Programming with HTML5, CSS, and JavaScript now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.