JavaScript Graphics Library ( Draw and move interactive vector graphics easily in Javascript!


JSGL 2.0 beta released!

This is a documentation for JSGL 2.0. Version 2.0 is backward compatible with JSGL 1.0. You are advised to upgrade to JSGL 2.0 in your applications. If you wish to keep using JSGL 1.0 anyway, keep an eye on the “Since” flags in the documentation.

Quick Start

Hello World! Check the Hello World! application!

Shows how to include necessary tags to your HTML in order to make JSGL work.

A complete HTML/JSGL example is provided.

Demonstrates how to instantiate jsgl.Panel object, which many examples rely on.


Panel Object

jsgl.Panel is the core class providing interconnection between HTML and the JSGL API.

You can create jsgl.Panel by passing reference to a holder <div> element to its constructor.

After you have jsgl.Panel created, you can work with all the graphics features described below.


Overview of JSGL base elements follows. Click the image at left to see the full reference and examples.


Line Element

Simple line drawn from start-point [start-x,start-y] to end-point [end-x,end-y].

The line is styled by a stroke object of variable properties.


Rectangle Element Rectangle of given width and height, decorated with stroke and fill objects.

It can be positioned relatively to and rotated around its anchor point (x,y).

Also, the rectangle supports rounded corners specified by x-radius and y-radius.


Circle Element Circle of given center-x, center-y, and radius.

It can be styled with stroke and fill objects.


Ellipse Element Ellipse of given center-x, center-y, width and height.

The ellipse can be styled with stroke and fill object.

It is possible to rotate the ellipse by specified angle.


Polyline Element Multi-segment line defined by a sequence of points (vertices), which can be expressed as [(x1,y1),…,(xn,yn)].

The points can be manipulated by standard List operations, such as add, insertAt, removeAt, clear, etc.

There is a stroke object associated for styling the polyline.


Polygon Element Similar to polyline (see above), but its path is closed.

The polygon can be styled by stroke and fill objects.


Image Element Allows drawing of raster images given by source URL.

The image is of specified width and height (determined automatically or set manually).

It can be positioned relatively to and rotated around its anchor point (x,y).

Outline of the image can be decorated by a stroke object.


Label Element

Allows putting simple text labels into the drawing.

The text is of specified font-family and can be set bold, italics, underlined, overlined, or struck-through.

Bezièr Curve

Curve Element

Cubic Bezièr curve given by start point [x,y], control point #1 [x,y], control point #2 [x,y], and end point.



Shape Element Allows drawing of arbitrarily-complex general shapes by implementing SVG path segment commands.

The path consists of ordered list of path segment objects such as move-to, line-to, elliptical-arc-to, etc.

Each segment's object can be dynamically modified, as well as the segments can be added to/removed from the list.


Group Element Allows hierarchical composition of elements, which is especially useful for:

  • moving multiple elements at once,
  • capturing mouse events on groups of elements,
  • working with z-indices in hierarchical manner.


SolidStroke class

SolidStroke class Allows you to specify:

  • Color and opacity of the outline,
  • Dash style (pattern of dashes and gaps),
  • Endcap type (the shape to be used at the end of open subpaths),
  • Join styles (shape to be used at the corners of paths).

DisabledStroke class

jsgl.stroke.DisabledStroke class

Completely prevents the stroke from being painted.

Instance accessible via jsgl.stroke.DISABLED:



SolidFill class

SolidFill class Allows you to specify:

  • Color of the interior,
  • Opacity of the interior.

DisabledFill class

jsgl.fill.DisabledFill class

Completely prevents the fill from being painted.

Instance available via jsgl.fill.DISABLED:


Mouse Events

Mouse Events Each JSGL element provides an interface for adding listeners to mouse events.

The events include mouse-over, mouse-out, click, double-click, mouse-move and context-menu (right-click).

Event-arguments object provides coordinates (x,y) of the event in scopes of both the parent coordinate system and the panel object.


Utility class jsgl.util.Animator will simplify your animation tasks:

  • periodic execution of time-parametrized functions,
  • allows you to specify:
    • duration of the animation in milliseconds
    • start value and end value of the control parameter
  • provides methods to play, pause, stop, rewind and repeat the animation


jsgl.util.delegate – object-method pairing

jsgl.util.EventRaiser – MVC architecture utility class

jsgl.util.ArrayList – simple arraylist implementation

Function.prototype.jsglExtend – classical inheritance utility

documentation.txt · Last modified: 2016/05/08 16:13 by John English
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS