Contents

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.