GraphicsJS Shapes and Primitives

• Overview
• Basic Shapes
  • Rectangle
  • Circle
  • Ellipse
• Predefined Shapes
• Clip
• Coloring
  • Fill
  • Stroke

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

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:

• Fill Settings
  • Hatch Fill Settings
  • Stroke Settings

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