Rectangle Tool

Quick Editor
Load image in the simple editor below for quick editing.
Online App (Beta)
Edit with layers panel, menus and user interface like a traditional raster graphics image editor.
Selection history
fill: stroke:  radius:
x: y: w: h:
 |   %  |  New file
Click Here to open the editor if stopped by popup blocker.
Launch Editor
*Nb. This page is needed for the online editor. Do not close while editing.

If the editor launch was blocked by your browser consider adding gifgit.com to your browser safe popup list.

Chrome

  1. Click the Customize and control Google Chrome menu. ( button at top right of browser).
  2. Click Settings.
  3. Expand the Advanced menu then select the Privacy and Security in the sidebar.
  4. Click Site Settings then Pop-ups and redirects.
  5. Under Allow click the Add button.
  6. Enter gifgit.com in the dialog and press Add.



edit index: | selection index: deselected filename:
clipboard

About the Rectangle Tool

The rectangle tool is one of several basic shape drawing tools you'll find in the online image editor. It is used to draw a rectangular or square shaped polygon. Drawing with the tool is done by simply pressing and dragging to get the dimensions of the rectangle you want. You can set the fill color and add a border by setting the stroke width and stroke color. You can also get the SVG of the drawn rectangle.

How to Use the Rectangle Tool

  1. Upload an image using the form above to load it in the online editor. If you already have an image opened in the editor select the rectangle tool by clicking its icon in the toolbar.
  2. To begin the drawing press in the image to set the starting point of the rectangle. With the mouse still pressed drag to create the rectangle.
  3. Release the mouse to complete drawing the rectangle.

How the Rectangle Tool Works

Selecting the Rectangle Tool

To use the rectangle tool click the rectangular tool icon in the cluster of drawing tools in the toolbar. When you click the icon the editor loads to the rectangle tool page and the tool options bar will populate with options for the rectangle tool.

Drawing with the Rectangle Tool

To draw a rectangle press and drag in the editor canvas. The rectangle will start where you press and will change width and height as long as you drag in the canvas. The drawing of the rectangle is completed when you release the mouse to set the dimensions of the rectangle.

After the drawing is complete you can manipulate the rectangles dimensions by using the control handles that are along its corners and edges. For example if you move the cursor just above the top edge of the drawn rectangle you will see the cursor change to a resize icon which you can use to resize the height of the rectangle by pressing and dragging up and down. This same action can be done for all edges and corners. The rectangle can be moved by pressing in the drawn rectangle and dragging. Along with the control handles the rectangle can be resized and repositioned using the inpuyt fields in in the tool options bar.

Stroke and Fill

You can set the fill color of the rectangle along the stroke width and color using the input fields in the tool options bar. The stroke width sets the width of the border around the rectangle and the stroke color sets its color.

SVG Rectangle

The 'SVG' button is provided in the options toolbar to get the SVG (scalable vector graphic) <rect> output of the drawn rectangle. Clicking the button opens a popup with the xml code in a textbox for you to copy. The default svg document size is set to the rectangle. To change the size to the canvas of the edited image uncheck the use rectangle only checkbox.

Feature Rich Online Image Editor

Online photo editing with layers, layer masks, a workflow and user interface like a traditional desktop photo editor that provides you with the toolset and features to professionally edit your images. No need to download or use desktop software like Microsoft Paint, Photoshop or GIMP to do quick edits. Edit your images online with the best online image editor.
Features Gifgit Editor Lunapic
Browser based editing (No software download) Yes Yes
Layers Yes No
Layer Masks (Non-Destructive Editing) Yes No
Selection tools Yes No
Undo History List Yes No
Export Formats Supported: JPEG, PNG
Sorry, your browser does not support inline SVG.