These three tools for drawing geometric shapes: Rectangle (Rectangle Tool (R)), Oval (Oval Tool (O)) and Polygon (PolyStar Tool) are on the Tools Panel, all in the "Rectangle" button (see the image below). They are used to quickly draw simple geometric shapes.

Rectangle, Oval, Polygon Tools
To select one of the tools "hidden" in the Rectangle Tool button, click and hold it.
They are easy to use; you just click and drag on the Stage to create the shapes.
There are two types of tools to each rectangle and oval: Standard and those with Primitive (as shown in the image above).
The Standard Tools have the two main options for drawing: "Merge Drawing" and "Object Drawing", which can be changed in the options area of the Tools panel, for more details see Merge Drawing and Object Drawing.

1. The shapes drawn with Standard tools have two main elements that can be selected and modified separately or together: the stroke (margin line) and the fill.

2. Primitive tools ("Primitive Rectangle Tool" and "Oval Primitive Tool") have a single drawing mode, similar with "Object Drawing", but the edge line and Fill are united in a single element, they can't be selected separately.
The Primitive shape tools allow you to specify the corner radius of rectangles, and the start and end angle and the inner radius of ovals using controls in the Properties Panel.

You can draw shapes with no line or no fill by choosing colorless button -> colorless, located in the top-right of the "Stroke Color" and "Fill Color" pannels.

Line and Fill

Rectangle, Oval, Polygon Tools

Rectangle and Oval

The Rectangle tool creates rectangles with square or rounded corners. The Oval tool creates circular shapes such as ovals and circles.
Properties, such as size, color, border line, can be modified in the Properties panel.
In the next picture you can find explanations about the properties that can be set.

Properties for Rectangle and Oval

Properties for Rectangle and Oval
- The settings from "Rectangle Options" and "Oval options" can be defined after the "Rectangle Tool" (or "Oval Tool") was selected, but before to draw the shape.
These options can not be set or changed after the shape was drawn with Standard tools (except the shapes drawn with Primitive, which allows you to set these options after drawing).

You can hold down the Shift key while dragging to produce a perfect square with equal sides or a perfect circle.
- You can set specific sizes with a dialog box. Alt+click after you select "Rectangle tool" (or "Oval tool"), set the values you want, and then click OK.

Polygon - Star (PolyStar)

Polystar tool allows you to easily create complex vector shapes.
You can use this tool to create polygons and stars. Both styles have characteristics that can be defined in the "Properties panel" before you draw the shape.
Both the polygon and star style can have up to 32 sides.
Experiment with several options to get the kind of shape you want.

PolyStar options

PolyStar options
- Click and hold the "Rectangle tool" on the Tools panel, and then point to PolyStar Tool.
- Click Options in the "Properies panel".
- Click the Style list arrow, and then select Polygon or Star.
- Enter a value for the number of sides (from 3 to 32).
- For the Star style, you can specify an additional option for Star point size. You can enter a value ranging from 0.1 to 1.0 points.
- Click OK, drag on the Stage, and then release the mouse.
See the example in the image below.
Polystar example

After it has been drawn a polygon, or star, the settings for sides and "Star Point Size" can not longer be changed from the Properties.

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Rectangle, Oval, Polygon - Star

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (15558)
  2. Moving html element to a random direction (84)
  3. XHTML References - Old (15)
  4. Star shapes with CSS (4464)
  5. Get and Modify content of an Iframe (12618)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (387)
  2. Register and show online users and visitors (355)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (327)
  4. Insert, Select and Update NULL value in MySQL (256)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (254)