# EZ Math Movie, Tutorials, Simple Graphics, Drawing a Rectangle

### Area and line rectangles

We will draw two types of rectangles. They are called a rectangle area and a rectangle line.

The rectangle area has its interior filled with the current area color. It would be drawn using this command:

drawRectangleArea(x, y, width, height);

The rectangle line has its perimeter drawn with the current line thickness and color using this command:

drawRectangleLine(x, y, width, height);

### The rectangle parameters

 In both the rectangleArea and rectangleLine commands the 'x' and 'y' parameters refer to the x- and y-coordinates for the upper left corner of the rectangle. The 'width' and 'height' parameters have their obvious meanings shown in the diagram.

### Using the code

• The following code line would draw a rectangle area filled with the current area color.
• It would have its upper left corner located at point (3, 5).
• It would be 6 units wide and 2 units high.
drawRectangleArea(3, 5, 6, 2);
• And the following code would draw only the edges, or the perimeter, of the same rectangle.
drawRectangleLine(3, 5, 6, 2);

### Drawing the rectangle area and line together

Here's a picture that shows the results of drawing a yellow rectangle area and then a black rectangle line:

Remember that setupGraph sets the area color to yellow, the line color to black, and the line thickness to 2.

### Running the example program

The following example shows how to draw both the rectangle area and line. Be sure to notice that the area is drawn first. If you draw the area second, it will at least partially cover up the rectangle line.

### The example program

0ptions

Go on input

Bounds:
Sorry, apparently this browser does not support HTML 5 canvas tag graphics.
Printer

Edit: Runtime          View: Starter Suggestion

To runtime:

Storage:

Editor width: Normal Wide

### And....

Next tutorial: The printer at startup

### Other sites you may find interesting

Like Math and Physics?

Zona Land Education offers explanations, diagrams, and animations on these topics.
And it is all presented in a clear and casual manner.

Want to learn about programing computers?

EZ Programing Demos has an animated, slow motion, interactive programing language demonstrator.
The site presents basic ideas at a beginner's level.

Custom Search

Name:
Domain:

Name
0

Name:
Name
0