JavaScript Graphics Library (JSGL)

JSGL API provides a set of fundamental objects, such as a line, a circle, polygon, or a text label, in a form of so-called JSGL elements.

JSGL element is practically a GUI component – through the use of appropriate methods, a programmer may change its appearance.

In consequence of calling these methods, an event occurs internally in JSGL and the element in updated with a use of DOM.

A programmer may integrate multiple JSGL elements into a higher-level objects.

See the Overview of JSGL elements for more information.

Basic construct for creating JSGL elements is the Panel class. Panel class offers a set of factory methods that can be used for creating JSGL elements. JSGL elements created may then be added to and removed from the Panel's viewport. This can be done through the use of addElement and removeElement methods provided by the Panel object.

The JSGL Panel's constructor requires a reference to DOM object of some HTML element that the graphics objects shall be placed into.

See the Tutorial to try the library.

Client-side web programming has always been missing native drawing API that a web browser would provide for use in JavaScript. As a result, many third-party plugins capable of graphics programming have been introduced. At the present time, capabilities of major web browsers have reached the point that makes native drawing using JavaScript possible. JSGL is a platform-independent client side web drawing library with the browser-dependent implementation specifics embedded.

Traditional Graphical User Interface APIs provide a drawing canvas that can be painted at the level of pixels. Usually, the API comes with a set of procedures capable of rendering various geometric figures onto the canvas. A programmer makes use of API methods such as drawLine() or fillEllipse(). Most notably, however, there is a PutPixel() method available, allowing a programmer to change individual pixel of the viewport. Furthermore, modern GUIs make use of the concept of graphics components. A component is an object with the capability of rendering itself onto a canvas. A component may use several pixel-level rendering procedures to visualize itself. GUIs typically implement techniques to repaint components when required.

In the environment of web-page JavaScript, a programmer works in a higher level of abstraction. It is the web browser that maintains rendering. Only thing a programmer has to is to tell the browser which object it shall render through DOM interface. For example, it is only possible to change fill color of a circle displayed from blue to red by setting attributes of appropriate document nodes in a document tree. In consequence, web browser maintains the rendering with sophisticated algorithms allowing fast update of a user's screen. These algorithms include those of anti-aliasing and alpha-blending, too.

JSGL integrates VML and SVG languages and provides common JSGL API isolating a programmer of browser-dependent realization. The programmer uses a set of elementary components representing basic shapes. In JSGL, these basic components are called JSGL elements. Being completely isolated from DOM interface, a programmer does not need to know anything about these XML-based technologies (XHTML, SVG, VML) at all.

As JSGL API closely follows object-oriented paradigm, it is suitable for programmers accustomed to a Java-like language. JSGL components allow for grouping and thus creating higher-level components to be used by application logic.