Javascript Library – JSGraphics

Dietrich Kappe, Saturday, September 23, 2006 @ 8:00 am

Sometime its nice to be able to deploy just a single web page without style sheets, plugins, what have you. Just a nice, self contained package. But what about the images? Surely you have to have external image? Well, no, actually. There's a Javascript library, JSGraphics, that has been around for quite some time that will allow you to describe and render and image using Javascript.

From the project page:

Color image is just a 2D array of colors. If you think about image this way you can see that it is possible to draw an image of the size N*M in HTML-only way - as a table with N columns and M rows, where each cell takes one pixel and has a background color assigned to it. Unfortunately even a small image represented like this in HTML results in a large and complex code for the browser. But for artifitial images it is very easy to use RLE compression - if there are several cells in a line of the same color you can replace them by one cell with the correct colspan/rowspan attributes assigned for it.

There are three cool things about this type of images:

1. They can be posted on the pages where images are not allowed (like some forums, or livejournal),
2. The size of HTML sended from the web server to client's computer is not very large - the HTML for the images is generated on the client's computer only,
3. They can be animated to react on user input.

I made a simple JavaScript library that allows you to use simple 2D graphics functions to create such images (like drawing lines, points or circles). Comments and suggestions are welcome.

The GCanvas class provides all the usual operations -- drawing lines, elipses, filling areas -- and subclasses of the GOutput class allow for different kinds of rendering, such as DHTML and Java Applet. You can even do animation with it (see the eyes demo). Great browser compatibility, for when you can't rely on SVG in the browser.

Technorati : graphics, javascript, library

Related posts:

1. Ajax/Javascript Library – DHTMLGoodies
2. Javascript Library – JQuery
3. GWT Widget Library – Moving Fast
4. DOM methods, document.write and the art of library design
5. MyGWT Widget Library

Comments (1)

Software Development

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Eww… That’s just so inefficient. And RLE is not very good compression.

   It may not be supported by IE, but by far the best option for inline images is the data: URI scheme.
   http://en.wikipedia.org/wiki/Data:_URI_scheme

   Also, what forums would ever allow javascript but not images?

   Comment by Tim, Saturday, September 23, 2006 @ 11:57 pm

Leave a comment