Graphics can be done directly in browsers. Simply create div elements in the right places with the right sizes and colors.
Walter Zorn wrote wz_jsgraphics.js and wz_dragdrop.js, complete with user manuals and examples. Walter Zorn’s wz_tooltip.js is well known, too.
His site, www.walterzorn.com, ceased to work following his death in 2009. Numerous other sites were left with non-functioning links to it. The user guides were gone.
Don’t panic. Walter Zorn’s software did not disappear along with his site.
They tell us that the site will from now on be static, technical support cannot be provided, and the copyright and LGPL licence terms must still be complied with.
The software libraries, which can be downloaded from the site as .zip files, seem to be up-to-date (jsgraphics version 3.05; dragdrop version 4.91; tooltip version 5.31. In case Notepad scrambles an unzipped source text, try Wordpad.) The user manuals seem up-to-date as well.
In case you cannot access the site, see the note at the end of this page.
Version 3.05 was last modified on February 2, 2009. There are a few technical changes and a bug fix relative to Version 3.03. That was the version in which the design of
drawImage(imgSrc, x, y, w, h, a)was improved such that w (image width) and h (image height) are now optional. Omit them, and the image will default to its original size. The sixth parameter a is an optional html text string which you can use to insert one or more eventhandlers. If you need a but not w and h, put w and h to zero.
There are a total of 591 div elements in the illustration near the top of this page.
(The grapics assumes a zoom level that is not necessarily identical to the default zoom level of today’s browsers. Try and change your browser’s zoom level a couple of times until the illustration presents itself in the right graphics quality.)
In order to minimize the number of div elements, jsgraphics combines as many pixels as possible into each element.
For instance, it took as few as four div elements to draw the blue unfilled rectangle near the illustration’s top right corner – to be compared with 52 for the thin blue ellipse at the top left, and just one for the blue filled rectangle.
A filled ellipse is put together of horizontal line segments, each with a carefully chosen thickness.
In order to see how jsgraphics economizes with the div elements, let us draw a filled ellipse and color different div elements with different colors:
As the code snippet demonstrates, when jg is a jsGraphics instantiation, then the array jg.cnv.children gives you access to the individual div elements. (Note that the coloring is intentionally slowed down.)
But the above example is oversimplified. In a multi-shape illustration such as the one near the top of this page, you may sometimes need to know which div elements belong to which shapes.
One way to do this relies on the observation that Walter Zorn's div elements are created with an empty name property. I have written a very simple function that looks for elements with empty names and collects them into an array. It assigns non-empty names to those elements so that they will not be found next time, and returns the array to the calling function. Whenever I need to access the div elements of a shape, I call that function before and after the shape has been drawn.
The source text of the function, which is called .getNewcomers, is easily accessible in a file called something like graphutils.js on the server. Feel free to copy it in case you are interested. I always add it dynamically to jsGraphics.prototype in order to keep Walter Zorn’s library unchanged.
Walter Zorn’s wz_jsgraphics reference manual says nothing about access to individual div elements. Curiously, an ellipse with stratified colors, similar to the above example but smaller, appears in his manual as a GIF image – suggesting that the idea is not new.
An example of in-browser graphics made with wz_jsgraphics can
be found elsewhere at this site: It is used for
the author’s squared rectangle calculator.
Browser developers are unlikely to address the problem now that the HTML5 canvas is the modern way to do graphics in-the-browser.
Therefore, in order to ensure uniform quality, the HTML5 canvas is now used for thin inclined lines in the squared rectangle calculator linked to above.
Similarly, a circle is now simply a div element with a large border-radius; but rectangles and squares are still drawn with jsgraphics.