C Point Web Automation Software & Services About C Point and what we can do for you Contact us Follow us on Twitter C Point Web Automation Software & Services Home

 

"The Antechinus JavaScript Editor is the absolutely best javascript editor I have ever seen. I am especially fond of the intellisense function and the library function with the many possibilities.

Also the function overview, so you don't have to scroll up and down, and the solution library for reuse."

- Kurt Lind
Gentofte, Denmark


 

With vector-draw you can create games... but if you'd rather play games, check this out:

 

 

 

"I use the Javascript editor for all my editing needs including Java, HTML, and XML.

Generally I am very pleased with it..."

- Craig Cleaveland
www.craigc.com

 

JavaScript Editor - a versatile tool with diverse uses - for designing everything from the pregnancy calculator to stock charting software

 

"JavaScript Editor was a major improvement over the older methods of editing, testing and debugging javascripts.

The web effects tools really made my web site notices!."

- Randy Stackhouse
www.mysignup.com

 

 

Great for Creating Games:
JavaScript Vector-draw Library

How many times you wished if you could only draw an arrow on your web page? Or few lines here and there? Unfortunately, HTML offers nothing in this department, and using images takes bandwidth and slows down the loading of your pages.

Courtesy of Walter Zorn, you can now use JavaScript to draw objects on your web pages. Fire up your JavaScript Editor, follow the instructions below and you will be drawing shapes on your web pages in no time.

This library is a great choice for creating games, or just to spruce up your web pages.

Click here to download the JavaScript vector-draw library (6KB) under LGPL license

Use the library to draw:

Lines (see example above)
Circles and ellipses / ovals (see example above)
Rectangles (see example above)
Poly-lines and polygons (see example above)
Text
Images

Note: The library is cross-browser and fast. However, due to the limitations of HTML, drawing on your web pages using JavaScript is slower compared to drawing in stand-alone applications. If you want to see more detailed explanations on the workings of the library, visit Walter Zorn's website at www.walterzorn.com.

How to use the library in 3 quick steps

Copy the library in the same folder with the web pages using it and add the following in the <head> section:
<script type="text/javascript" src="wz_jsgraphics.js"></script>

In the body of the document, specify one or more <div> tags for drawing, for example:
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>

Draw!
// Call jsGraphics() with no parameters if drawing within the entire document
var jg = new jsGraphics("Canvas");    // Use the "Canvas" div for drawing
jg.setColor("maroon");
jg.fillEllipse(450, -5, 40, 70);
jg.setStroke(1);
jg.setColor("#ff6666");
jg.drawPolyline(new Array(90, 640, 90), new Array(0, 25, 90));
jg.setColor("green");
jg.drawRect(100,40,200,18);
jg.setColor("blue");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(-20,0,32,50);
jg.drawEllipse(250,10,100,100);
jg.paint();

Functions


clear();

Purpose: Clears the content between the <div>..</div> tags used for drawing.

Example:
jg.clear();


drawEllipse(x, y, width, height);

Purpose: Draws an ellipse.

Example:
jg.drawEllipseEllipse(0, 0, 100, 200);


drawImage("URL", x, y, width, height, eventHandler);

Purpose: Displays an image at the given location, with the optional event handler.

Examples:
drawImage("MyImage.gif", 10, 10, 100, 200);
drawImage("MyImage.gif", 10, 10, 100, 200, 'onmouseover="DoSomething()"');


drawLine(x1, y1, x2, y2);

Purpose: Draws the line from the point x1, y1 to x2, y2.

Example:
jg.drawLine(0, 0, 100, 200);


drawPolyline(Xpoints, Ypoints);

Purpose: Given an array of points, draws multiple connected lines.

Example:
jg.drawPolyline(new Array(0,10,200), new Array(0,10,100));


drawRect(x, y, width, height);

Purpose: Draws a rectangle.

Example:
jg.drawRect(0,0, 100,200);


drawPolygon(xPoints, yPoints);

Purpose: Given an array of points, draws a polygon.

Example:
jg.drawPolygon(new Array(0,10,200), new Array(0,10,100));


drawString("text", x, y);

Purpose: Displays text at the given location.

Example:
jg.drawString("Hello World!", 10, 10);


drawStringRect("text", x, y, width, "justification");

Purpose: Displays justified text of the specified width. The text justification can be:

"left"
"center"
"right"
"justify"

Example:
jg.drawString("Hello World!", 10, 10, 500, "center");


fillEllipse(x, y, width, height);

Purpose: Draws a filled ellipse.

Example:
jg.fillEllipse(0,0, 100, 200);


fillPolygon(Xpoints, Ypoints);

Purpose: Draws a filled polygon.

Example:
jg.fillPolygon(new Array(0,10,200), new Array(0,10,100));


fillRect(x, y, width, height);

Purpose: Draws a filled rectangle.

Example:
jg.fillRect(0,0, 100, 200);


paint();

Purpose: To optimize performance, library functions generate the drawing code internally. The paint() function must be called to do the actual drawing.

Example:
... A set of calls to drawing functions here ...
jg.paint();


setColor("#HexColor");

Purpose: Specifies the color to be used by subsequent drawing functions.

Examples:
jg.setColor("#ff6666");
jg.setColor("blue");


setFont("font-family", "size+unit", fontStyle);

Purpose: Specifies the font properties to be used by the drawString(); function. Available font styles are:

Font.PLAIN
Font.BOLD
Font.ITALIC
Font.ITALIC_BOLD

Example:
jg.setFont("Times New Roman", "10px", Font.PLAIN);


setPrintable(boolEnable);

Purpose: Enables printing of JavaScript-generated drawings. Note that there is a performance cost: the rendering slows down.

Example:
jg.setPrintable(true);


setStroke(thickness);

Purpose: Specifies the pen thickness to be used by subsequent drawing functions.

Example:
jg.setStroke(3);


...

Find out how to instantly spice up your web pages with JavaScript Editor