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

x, y at upper left, width, height

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

drawRectangleArea(3, 5, 6, 2);
drawRectangleLine(3, 5, 6, 2);

The area and the line

drawRectangle Area and Line

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:

Yellow rectangle area, 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

Angle measurement: Degrees Radians

Go on input

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

Edit: Runtime          View: Starter Suggestion

To runtime:


Editor width: Normal Wide








Next tutorial: The printer at startup

All contents of EZ Math Movie are copyrighted: Copyright 2011, Edward A. Zobel. All rights reserved.

Other sites you may find interesting

Zona Land Education 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.

Here is the link: zonalandeducation.com

EZ Programing Demos 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.

Here is the link: ezprogramingdemos.com

Custom Search