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);

Playground

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);

Playground

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);

Playground

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 the list of those shapes which can significally shorten and simplify your code. Some of them need a basic shape to be applied to.

Method Parameters Description
cross() stage/path, centerX, centerY, outerRadius Draws a cross set by it's circumscribed circle's center and radius.
diagonalCross() stage/path, centerX, centerY, outerRadius Draws a diagonal cross set by it's circumscribed circle's center and radius.
diamond() stage/path, centerX, centerY, outerRadius Draws 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 inner 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 corners.
star() stage/path, centerX, centerY, outerRadius, innerRadius, number of spikes, startDegrees, curvature Draws multi-pointed star.
star4() stage/path, centerX, centerY, outerRadius Draws a 4-spiked star.
star5() stage/path, centerX, centerY, outerRadius Draws a 5-spiked star.
star6() stage/path, centerX, centerY, outerRadius Draws a 6-spiked star.
star7() stage/path, centerX, centerY, outerRadius Draws a 7-spiked star.
star10() stage/path, centerX, centerY, outerRadius Draws a 10-spiked star.
triangleDown() stage/path, centerX, centerY, outerRadius Draws a triangle heading downwards set by it's circumscribed circle's center and radius.
triangleLeft() stage/path, centerX, centerY, outerRadius Draws a triangle heading leftwards set by it's circumscribed circle's center and radius.
triangleRight() stage/path, centerX, centerY, outerRadius Draws a triangle heading rightwards set by it's circumscribed circle's center and radius.
triangleUp() stage/path, centerX, centerY, outerRadius Draws a triangle heading upwards set by it's circumscribed circle's center and radius.
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, outerRadius Draws a thick horizontal line set by it's circumscribed circle's center and radius.
vLine() stage/path, centerX, centerY, outerRadius Draws 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);

Playground

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);

Playground

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")";

Playground

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");

Playground