| Name of function (method) |
Code example as to be used with the above example object
'jg' (which is the context of the DIV called "myCanvas") |
General Notes
1.) Numbers
passed to these functions must always be integer numbers,
rather than decimal point numbers (floating point numbers),
characters or strings. For instance, values obtained from formular
inputs are always strings, and results from previous JavaScript
calculations typically floating point numbers. Use either the
predefined parseInt() or the Math.round()
JavaScript function to convert data to integer. Example:
jg.setStroke(parseInt(document.MyForm.Linewidth.value));
2.) Consider that co-ordinates lie between
pixels, not on them, and that the drawing "pen" hangs beneath and to
the right of the path specified by co-ordinates passed to the
functions. |
setColor("#HexColor");
Specifies the color of the drawing "pen". Once set,
this color will be used by the subsequently called drawing methods
until it will be overridden through another call of setColor(). The
value must be enclosed in quotation marks, and should be hexadecimal
following the pattern "#rrggbb" (as usual with HTML). Color names
available in HTML (for instance "maroon") may be used as well. |
jg.setColor("#ff0000");
or with
identical result
jg.setColor("red"); |
setStroke(Number);
Specifies the thickness of the drawing "pen" for lines
and bounding lines of shapes. Once set, this thickness will be used
by the subsequently called drawing methods until it will be
overridden through another call of setStroke(). Default line
thickness is 1 px, as long as .setStroke() has not yet been
invoked.
To create dotted lines, setStroke()
requires the constant Stroke.DOTTED as argument. Width of
dotted lines is always 1 pixel. |
jg.setStroke(3);
or
jg.setStroke(Stroke.DOTTED); |
drawLine(X1, Y1, X2, Y2);
Line from the first to the second pair of coordinates. Line
thickness is either 1 px or the value most recently specified
by .setStroke(). |
jg.drawLine(20,50,453,40); |
drawPolyline(Xpoints, Ypoints);
A polyline is a series of connected line segments. Xpoints and
Ypoints are arrays which specify the x and y coordinates of each
point as follows:
var Xpoints = new
Array(x1,x2,x3,x4,x5);
var YPoints = new
Array(y1,y2,y3,y4,y5);
Instead of Xpoints and Ypoints you
may of course use other names provided these follow the rules for
JavaScript variable names.
Line thickness is either
1px or the value most recently specified by
.setStroke(). |
var Xpoints = new Array(10,85,93,60);
var YPoints = new
Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints); |
drawRect(X, Y, width, height);
Outline of a rectangle. X and Y give the co-ordinates of the left
top corner. Line thickness is either 1px or the value most recently
specified by .setStroke(). |
jg.drawRect(20,50,70,140); |
fillRect(X, Y, width, height);
Filled rectangle. X and Y give the co-ordinates to the left top
corner. |
jg.fillRect(20,50,453,40); |
drawPolygon(Xpoints, Ypoints);
Polygon. Xpoints and Ypoints are arrays which specify the x and y
coordinates of the polygon's corners as follows:
var
Xpoints = new Array(x1,x2,x3,x4,x5);
var Ypoints = new
Array(y1,y2,y3,y4,y5);
The polygon will be automatically
closed if the first and last points are not identical.
Line thickness is either 1px or the value most
recently specified by .setStroke(). |
var Xpoints = new Array(10,85,93,60);
var Ypoints = new
Array(50,10,105,87);
jg.drawPolygon(Xpoints,
Ypoints);
Instead of Xpoints and Ypoints you may
of course use other names provided these follow the rules for
variable names. |
fillPolygon(Xpoints, Ypoints);
Filled Polygon. Parameters as for drawPolygon() |
jg.fillPolygon(new Array(10,85,93,60), new
Array(50,10,105,87)); |
drawEllipse(X, Y, width, height);
Outline of an ellipse. Values refer to the bounding rectangle of the
ellipse, X and Y give the co-ordinates of the left top corner of
that rectangle rather than of its center. Line thickness is either
1px or the value most recently specified by
.setStroke(). |
jg.drawEllipse(20,50,70,140);
or
jg.drawOval(20,50,70,140); |
fillEllipse(X, Y, width, height);
Filled ellipse. Values refer to the bounding rectangle of the
ellipse, X and Y give the co-ordinates of the left-top corner of
that rectangle rather than of its center. |
jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141); |
fillArc(X, Y, width, height, start-angle, end-angle);
Fills a pie section of an ellipse. Start-angle and end-angle may be
integer numbers or decimalpoint values. Like with the other
...Ellipse() functions, X and Y specify the left-top corner of the
bounding rectangle. |
jg.fillArc(20,20,41,12,270.0,220.0); |
setFont("font-family", "size+unit",
Style);
This method can be invoked prior
to drawString() to specify or change font-family, -size and -style.
Values or font-family and -size may be whatever possible in HTML,
and must be enclosed in quotation marks.
Available
font styles:
Font.PLAIN for normal style (not bold, not
italic)
Font.BOLD for bold fonts
Font.ITALIC for
italics
Font.ITALIC_BOLD or Font.BOLD_ITALIC to combine the
latters. |
Example: see drawString() below |
drawString("Text", X, Y);
Writes text to the location specified by X and Y. Differently from
Java, these coordinates refer to the left top corner of the first
line of the text. The string passed to drawString() must be enclosed
in quotation marks. (Non-escaped) HTML tags inside the string will
be interpreted. For example,
"Some Text<br>more Text" would indeed create a line
break. |
jg.setFont("arial","15px",Font.ITALIC_BOLD);
jg.drawString("Some Text",20,50); |
drawStringRect("Text", X, Y, Width,
Alignment);
Like drawString. Allows however to set the width of the text
rectangle and to specify the horizontal text-alignment.
Text-alignment value must be a string (i.e. enclosed in quotation
marks or apostrophes) and can be either "left", "center", "right" or
"justify". |
jg.setFont("verdana","11px",Font.BOLD);
jg.drawStringRect("Text",20,50,300,"right"); |
drawImage("src", X, Y, width,
height);
Draws image on the specified location. "src" parameter specifies
path, width and height parameters allow to stretch the image
(almost) arbitrarily.
Optionally, drawImage() accepts
a fifth parameter which you can use to insert an eventhandler into
the generated image tag. Example:
jg.drawImage('anImg.jpg',8,5,95,70,'onmouseover="YourFunc()"');
|
jg.drawImage("friendlyDog.jpg",
20,50,100,150); |
paint();
Must be envoked
explicitly to draw the internally-generated graphics into the html
page. To optimize performance it's recommended to restrain from
calling paint() in unnecessarily short intervals.
Avoid something like:
jg.drawEllipse(0, 0,
100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...
The following will be
faster:
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200,
10, 400, 40);
/*...further drawing methods... */
jg.paint(); |
jg.paint(); |
clear();
Any content created
by the Graphics JavaScript Library will be deleted (within the
canvas the graphics object refers to). The default content of the
canvas (content not created by the script) will remain untouched,
i.e. neither be changed nor be deleted. |
jg.clear();
Any stuff the script has
drawn to "myCanvas" is deleted (assuming that "myCanvas" is the DIV
for which 'jg' has been created). |
setPrintable(true);
By
default, printing shapes isn't feasible since default printing
settings of browsers usually prevent background colors from being
printed. Invoking setPrintable() with the parameter true enables
wz_jsgraphics.js to draw printable shapes (at least in
Mozilla/Netscape 6+ and IE). However, at the price of a
slightly decreased rendering speed (about 10% to 25% slower). |
jg.setPrintable(false);
The parameter
false switches wz_jsgraphics.js back to non-printable mode. The
benefit from this, however, will be re-optimized rendering
performance. | |
Home
visitors on
www.walterzorn.com since 27. 12. 2002 