If you have ever used an image mapper or the crop at Gifworks then making squares and rectangles will be easy.

The rectangle requires two sets of numbers. There are two numbers in each set. The first set of numbers determine where the top left corner of the rectangle is placed. The second set of numbers deterine where the bottom right corner of the rectangle is placed. Both sets together determine how large the rectangle will be.

The first number of the first set is 100. It is 100 pixels across from the left edge. The second number of the second set is 20. It is 20 pixels down from the top edge. Where these two meet will be the top left corner of the rectangle. 100,20.

The first number in the second set is 300. 300 pixels across from the left edge. The second number of the second set is 380. 380 pixels down from the top edge. Where these two numbers meet will be the bottom right corner. 300,380. This is the coordinates for the example. 100,20 300,380. See the example below. I am using a 400x400 background.

As you can see making them is fairly easy to do.

The Round Rectangle is exactly like the Rectangle except it has three sets of coordinates. This last set will determine how much of each corner will be curved or rounded.

Unlike the other sets of numbers, this last set is not measured from the left edge or top edge. This set uses the width and height of the rectangle or square to form the curve. The first number of the third set curves the top and bottom of the Rectangle or Square. The second number curves the left and right sides of it.

The first number curves the width and the second curves the height. Remember there are two sides to the rectangle.

On a background of 400x400 I made a rectangle that is 200 x 300. Here are my coordinates: 100,50 300,350 the last set I am curving it just a little. The third set: 50,100.

As you can see there are two sides to the rectangle. You only need to consider one side and either top or bottom. Lets say the roundrectangle is 200 width and 300 height. I used 50,100 as the curving set. 50 is for the top and bottom. 50 x 2 = 100 ( for top corners ) So this means that 100 out of the 200 width is curved at the corners. The same goes for the height 100 x 2 = 200 out of 300 curved for the left and right sides.

Lets see what happens when the entire width is curved. Look at the example below to the right. I used 100,50 300,350 100,100. The 100 for the width is x 2 = 200.

Now let's see what happens when only the sides are completely curved. Here are the coordinates: 100,50 300,350 and curved at 50,150. Only 100 of the top and bottom is curved but the sides are at 300. (150 + 150= 300) 300 is the height of the roundrectangle. Look below to the left.

What would happen if the entire rectangle is cruved? Let's try it. Using the same : 100,50 300,350 for the rectangle and now for the curved coordinates or third set: 100,150. This is curving the entire rectangle. 100 + 100 = 200 for width 150 + 150 = 300 for height. Look below.

Surprised? I hope this has helped you to understand how the Rectangle and Roundrectangle works.

Susanna M