JSDrawing - Introduction
JSDrawing is a client-side JavaScript library that allows you to render vector graphics independently of browser and platform. The rendering API is based on SVG's path commands and adding support for new renderers is very simple.
Below, depending on your browser, you will see as many as five versions of a vector toucan. Firefox 1.5 will display DIVs, Flash, Canvas, and SVG. IE 6 will show DIVs, Flash, and VML. Opera 9 shows DIVs, Canvas, and SVG. Safari 2.0.3 shows DIVs, Flash, and Canvas.
DIVs |
Flash |
Canvas |
Inline SVG |
VML |
Be sure to grab a copy of the download. All source code, samples, and test code are available there. You may need to serve up the samples from a local web server due to security settings with Flash.
Key Features
- Use one API and output to multiple renderers
- Gracefully recover from unsupported rendering technologies. For example, if a user agent does not support Flash, you could optionally render to inline SVG or even DIVs
- Adding support for a new rendering target is very simple. Minimally, you only need to define mappings for moveTo, lineTo, and close commands.
- Gracefully degrade unsupported curve types using the highest quality curves available in the target renderer. For example, the DIV renderer does not support bezier curves. JSDrawing will automatically convert bezier curves into a series of line segments.
Requirements
- To plot using DIVs, you will need to use Walter Zorn's rendering library.
- To plot using Flash, you will need to use Paul Colton's AFLAX library. That library requires Flash 8.0 or higher. Note that Opera does not support the required interfaces to communicate with Flash.
- To plot using SVG, you will need a browser that supports inline SVG. Firefox supports inline SVG.
- To plot using the canvas tag, you will need a browser that implements that element. Firefox and Safari support the canvas element.