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); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
Filled rectangle. X and Y give the co-ordinates to the left top corner. | jg.fillRect(20,50,453,40); | drawPolygon(Xpoints, Ypoints); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
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); <script type="text/javascript">
</script>
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); | 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); <script type="text/javascript">
</script>
I've been drawn with the Vectorgraphics Library...
|
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); <script type="text/javascript">
</script>
A text drawn by using drawStringRect() which allows to set the width of the text rectangle and to align the text horizontally (in this case "right")
|
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); <script type="text/javascript">
</script>
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 within "myCanvas" (in these examples the DIV 'jg' refers to) drawn by the script is deleted. | 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. | |