You are looking at an outdated 7.12.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

# GraphicsJS Shapes and Primitives

## Overview

GraphicsJS is a lightweight JavaScript graphics library which allows to create graphic elements for all purposes, from very simple to very complex. This article describes how to draw simple shapes using GraphicsJS and use them to create more complex shapes.

When you work with GraphicsJS, you need to set stage as a container. On the Quick Start page and Basics you can find how to use stage as a container.

## Basic Shapes

There are three basic shapes: Rectangle, Circle and Ellipse. This section describes all three types of basic shapes.

### Rectangle

The rect() method allows to draw a rectangle of some width and height in some point. This method accepts X and Y coordinates of the left-top rectangle corner and two values that stand for its width and height. The following sample demonstrates creating a rectangular in the point (100, 10) with the width of 400px and height of 40px:

``````stage.rect(100, 10, 400, 40);
``````

### Circle

The circle() method creates a circle. You need to set the coordinates of the center point of the circle and its radius to the method to make it work.

Let's add a circle to the picture from the sample above.

``````// draw a circle
stage.circle(300, 150, 70);
``````

### Ellipse

Another simple shape is ellipse. Use ellipse() method for creating an ellipse on your stage. This method requires four parameters: X and Y coordinates of the ellipse center, X-radius and Y-radius.

``````// draw an ellipse
stage.ellipse(300, 300, 200, 50);
``````

## Predefined Shapes

Predefined Shapes are complex shapes which can be drawn on a stage using paths or with the help of special methods. Below you can find a list of those shapes which can significally shorten and simplify your code. Some of them need a basic shape to be applied to.

MethodParametersDescription
cross()stage/path, centerX, centerY, outerRadiusDraws a cross set by it's circumscribed circle's center and radius.
diagonalCross()stage/path, centerX, centerY, outerRadiusDraws a diagonal cross set by it's circumscribed circle's center and radius.
diamond()stage/path, centerX, centerY, outerRadiusDraws a diamond set by it's circumscribed circle's center and radius.
donut()stage/path, centerX, centerY, outerRadius, innerRadius, start angle (in degrees), sweep angle (in degrees)Draws a donut sector with sides. If sweep modulus is larger or equal 360, draws two concentric circles (without sides).
pie()stage/path, centerX, centerY, radius, start angle (in degrees), sweep angle (in degrees)Draws a pie sector with sides (a curvilinear isosceles triangle with center in (cx, cy)).
roundedInnerRect()stage or path, rectangle (which corners to truncate), radius (from 1 to 4 values: if set 1 value it will be applied to all corners; if set 2 values, first value will be applied to left-top and right-bottom corners and the second to right-top and left-bottom corners; if set 3 values, first one will be applied to the top-left corner, second to top-right and bottom-left and the third value will be applied to the bottom-right corner)Draws a rectangle with rounded corners.
roundedRect()stage or path, rectangle (which corners to truncate), radius (from 1 to 4 values: if set 1 value it will be applied to all corners; if set 2 values, first value will be applied to left-top and right-bottom corners and the second to right-top and left-bottom corners; if set 3 values, first one will be applied to the top-left corner, second to top-right and bottom-left and the third value will be applied to the bottom-right corner)Draws a rectangle with rounded inner corners.
star()stage/path, centerX, centerY, outerRadius, innerRadius, number of spikes, startDegrees, curvatureDraws multi-pointed star.
star4()stage/path, centerX, centerY, outerRadiusDraws a 4-spiked star.
star5()stage/path, centerX, centerY, outerRadiusDraws a 5-spiked star.
star6()stage/path, centerX, centerY, outerRadiusDraws a 6-spiked star.
star7()stage/path, centerX, centerY, outerRadiusDraws a 7-spiked star.
star10()stage/path, centerX, centerY, outerRadiusDraws a 10-spiked star.
truncatedRect()stage or path, rectangle (which corners to truncate), radius (from 1 to 4 values: if set 1 value it will be applied to all corners; if set 2 values, first value will be applied to left-top and right-bottom corners and the second to right-top and left-bottom corners; if set 3 values, first one will be applied to the top-left corner, second to top-right and bottom-left and the third value will be applied to the bottom-right corner)Draws a rectangle with truncated corners.
hLine()stage/path, centerX, centerY, outerRadiusDraws a thick horizontal line set by it's circumscribed circle's center and radius.
vLine()stage/path, centerX, centerY, outerRadiusDraws a thick vertical line set by it's circumscribed circle's center and radius.

The following sample demonstrates creating a shape from predefined objects.

``````// draws a star
acgraph.vector.primitives.star(stage, 200, 70, 50, 17, 7, 20, -0.9);
``````

## Clip

Clipping objects leads to creating new shapes and forms which can be used as custom graphic elements. Use the clip() method to clip objects and create a new shape.

``````stage = acgraph.create("container");

// Creates clip instance.
var clipArea = acgraph.clip(10, 10, 90, 90);

blueCircle.clip(clipArea);
``````

## Coloring

There are several methods that can be used for coloring the shapes. You can find more information about colors in the following articles:

Coloring methods accept values in HEX notation ("#00033A"), as web color ("black"), in RGB format ("rgb(0,0,255)") and more. Color can be set as rgb, rgba, hex, hsl, hsla or web constant, just as you do in CSS Color.

### Fill

Use the fill() method to fill the shape with a color.

``````// color the star with a golden color
star.fill("gold")";
``````

### Stroke

Use the stroke() method to stroke the shape. You can also set the thickness of a stroking line and some other settings you can find more about in the Stroke Settings article.

``````// set the stroke color to the star
star.stroke("#000000", "4");
``````