Released: Sat Jan 26, 2008

If you look at the source for this plot, you will see it is composed almost entirely of declarations of an array followed by a call to a simple function that draws the array as a polyline or a filled polygon.

I found empirically that large polylines in a canvas (This one has 200,000 points in the curve) are rendered faster by creating an array and processing it with a function, as in this example plot. Note that the firefox(1) browser was significantly faster than the opera(1) browser at test time. The file is also about half the size when using the array syntax rather than straight JavaScript calls.

Another difference between the browsers is that event handlers are set to redraw the plot 10% larger with each click until a double-click resets the plot to the original size. The syntax shown here works in firefox(1) but not in opera(1).

Something to think about is that by querying the graphics state and putting write calls in the functions you could actually make the plot translate itself into some other simple file formats; or similarly, the functions can act to support dashed lines or only show pens of a certain color, or force monochrome or grayscale output, or calculate plots statistics (ie. number of vectors) , or display coordinates, or ....