Hint:Click on "stamps" to make the plots very small; and then read the instructions below.
This is a good demonstration of the scalability of vector-based <CANVAS> elements. Click on a plot to make it larger. Double-click (firefox(1)) or press any key (opera(1)) in a plot to make it resize to the original size. Use the form buttons at the top to change all plot sizes simultaneously.
A CANVAS element does not show points as of this writing. I would like to propose that points be (optionally) rendered; and to demonstrate a work-around for applications that need to easily generate points.
The work-around employed here is to define all polylines as values in an array, and then to draw the array using a function that draws points when polylines have no length. Simply look at the JavaScript functions at the top of this document in source form for further details.
The following cases describe several proposed alternative behaviors. The extra buttons above concerning "points" were added to demonstrate the usefulness of points in rendering graphics such as XY plots and to actually show the proposed behavior(s).
If you select "points by linecap" then points show as circles if the linecap is "rounded" (plot 1); they show as squares if the linecap is "square" (plot 2); and they do not show up if the linecap is "butt" (plot 3). This is one suggested behavior.
Another possible behavior could be that you would select a style like you do with joinStyle or capStyle. The syntax could be
X.pointStyle=NAME;
where in my case
X = document.getElementById(my_canvas_name).getContext("2d");
and NAME could be a choice like "circle" or "square" or "null" or
a marker name like "plus".
You could imagine a variety of markers might
be defined; maybe user-defined ones would be allowed. The other "point"
buttons show how this behavior might work. If one of the allowed names
was "linecap", that would mean act like case I.
Another possibility might be that a global style (this would give less control though) would be set with a CSS style:
canvas{
point-style: circle
point-size: 100% /* relative size versus current line width */
}
Points (polylines of zero length) are currently ignored. You can see the current default behavior by selecting "no points". I would like there to be a built-in way to render points. I think "Case II" is the best way.
The toggle button that causes canvas element information to be displayed on each resize was added as a nuisance :>.
This is an output file generated with the VOGLE 1.2 CANVAS driver. It has been tested with the opera(1) and firefox(1) browsers. It was originally generated by the NSAPLOT input file that follows; but is has been edited by hand since then.
pg 999999999999 system on create 200 math c(1)*sin(c(1)) plot 2 set -mg 14 id -1 -w 10 plot grid id 1 -w 15 set -bg 14 -mg 11 plot linewidth 20 markers id linewidth 20 seefont 5
Created: 2008-01-28; John S. Urban