jsDraw2D.js - Javascript 2D Graphics Library

jsDraw2D.js is a Javascript library to draw 2D graphics on web page inside web browser. The library is entirely written in Javascript and does not need any plug-in or additional software to run/execute. The javascript source code of the library is open and free under "Creative Commons 3.0 Unported" license. This documentation describes the various javascript classes along with their methods (APIs) available in the jsDraw2D library.

This page was extracted from the original jsDraw2D.js. I would regularly consult this information when I was working on drawings. However, the original web site that contained this documentation, and the download of jsDraw2D.js, is now gone. I don't know exactly when it happened but the web site no longer exists. Luckily, I had a copy of the original socument.

I do not use all of the functions listed below. I use the same group of functions to initialize each of my drawings and then I keep the rest a simple as possible. This is shown in the example for jsGraphics(canvasDivElement) Constructor. Some of this document has been modified to be specific to my requirements. For example, I don't use the clear() function because it would clear the graphics canvas to black. Instead, I use a hand written function named Show_Grid() which allows me to initialize the graphics canvas to other colors and display a drawing grid.

The table below is a menu of jsDraw2D functions. Each of the functions have a sample that can be cut/pasted directly into a drawing script. All that needs to be changed is the funciton object.

Classes: Constructors Utility Functions Draw Functions Fill Functions Text/Image

This class holds the color information and provides some color related basic functions.

Constructors:

jsColor()

By default the jsColor object is created with black color.

// Set the Label jsColor object and Value jsColor object to black.
var Label_Color = new jsColor();
var Value_Color = new jsColor();

jsColor(hex)

Creates jsColor object with specified hexadecimal value.

// Set the whiteFill jsColor object to white and blackFill jsColor object to black.
var whiteFill = new jsColor("#ffffff");
var blackFill = new jsColor("#000000");
Parameter Type Description
hex String Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

jsColor(colorName)

Creates jsColor object with specified name of color.

// Set two fill colors.
var whiteFill = new jsColor("white");
var blackFill = new jsColor("black");
Parameter Type
colorName String One of the 16 color names also can be specified from following,
"aqua", "black", "blue", "fuchsia", "green", "gray", "lime", "maroon", "navy", "olive", "purple", "red", "silver", "teal", "white", "yellow".

Methods:

setHex(hex)

Description: Sets the color of an existing jsColor object with specified hexadecimal value.

Parameter Type Description
hex String Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

getHex()

Description: Gets the hexadecimal value of the jsColor object.

Return: Returns hexadecimal value of the jsColor object. Type: String

setRGB(redValue, greenValue, blueValue)

Description: Sets the color of an existing jsColor object with specified red, green and blue component values (RGB).

Parameter Type Description
redValue Number Red component value of the jsColor. The value should be whole number ranging from 0 to 255.
greenValue Number Green component value of the jsColor. The value should be whole number ranging from 0 to 255.
blueValue Number Blue component value of the jsColor. The value should be whole number ranging from 0 to 255.

getRGB()

Description: Gets the red, green and blue components (RGB values) of the jsColor object.

Return: Returns array of red, green and blue components (RGB values) of the jsColor object. Each value is a whole number ranging from 0 to 255. Type: Array

getDarkerShade(value)

Description: Gets the darker color shade of the jsColor object by specified value. A new jsColor object is returned by subtracting the specified value from each red, green and blue component of the jsColor object.

Parameter Type Description
value Number Value which is to be subtracted from each of the red, green and blue component of the jsColor object.

Return: Returns the new jsColor object having darker shade of the color. Type: jsColor

getLighterShade(value)

Description: Gets the lighter color shade of the jsColor object by specified value. A new jsColor object is returned by adding the specified value to each red, green and blue component of the jsColor object.

Parameter Type Description
value Number Value which is to be added to each of the red, green and blue component of the jsColor object.

Return: Returns the new jsColor object having lighter shade of the color. Type: jsColor

rgbToHex(redValue, greenValue, blueValue)

Description: Shared/Static method to convert specified RGB color value to Hexadecimal.

Parameter Type Description
redValue Number Red component value of the jsColor. The value should be whole number ranging from 0 to 255.
greenValue Number Green component value of the jsColor. The value should be whole number ranging from 0 to 255.
blueValue Number Blue component value of the jsColor. The value should be whole number ranging from 0 to 255.

Return: Returns hexadecimal value converted from specified RGB color. Returns false if parameters are invalid. Type: String

hexToRGB(hex)

Description: Shared/Static method to convert specified hexadecimal value to RGB color values.

Parameter Type Description
hex String Hexadecimal value of the color. The value can be specified in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.

Return: Returns array of red, green and blue components (RGB values) converted from the specified hexadecimal value. Each value is a whole number ranging from 0 to 255. Returns false if parameter hex is invalid. Type: Array

Class: jsFont

This class holds the font information which can be used by other objects in object oriented way.

Constructor:

jsFont([family], [weight], [size], [style], [variant])

Creates the jsFont object with specified parameters. All parameters are analogous to the commonly used CSS font properties. All parameters are optional and if not specified, the default values will be used while drawing the text.

Description: Draws a rectangle at specified point, width and height.

// Set set some font Family (Tahoma), Weight (normal), and Size (Pixels).
var Tahoma_10 = new jsFont( "Tahoma, Geneva, sans-serif", "normal", "10px" );
var Tahoma_11 = new jsFont( "Tahoma, Geneva, sans-serif", "normal", "11px" );
var Tahoma_12 = new jsFont( "Tahoma, Geneva, sans-serif", "normal", "12px" );
Parameter Type Description
family String [Optional] Analogous to CSS font-family property. Font family name or generic name of font family.
weight String [Optional] Analogous to CSS font-weight property. Weight of the font. Possible values: "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "900"
size String [Optional] Analogous to CSS font-size property. Possible values: "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", size, %
style String [Optional] Analogous to CSS font-style property. Possible value: “normal”, ”italic”, “oblique”
variant String [Optional] Analogous to CSS font-variant property. Text displays either in small-caps font or normal font. Possible values: “normal”, “small-caps”

Properties:

Name Type Description
family String Analogous to CSS font-family property. Font family name or generic name of font family.
weight

 String Analogous to CSS font-weight property. Weight of the font. Possible values: "normal", "bold", "bolder", "lighter", "100", "200", "300", "400", "500", "600", "700", "800", "
size String Analogous to CSS font-size property. Possible values: "xx-small","x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger", size, %
style String Analogous to CSS font-style property. Possible value: “normal”, ”italic”, “oblique”
variant String Analogous to CSS font-variant property. Text displays either in small-caps font or normal font. Possible values: “normal”, “small-caps”
Class: jsPen

This class holds the drawing pen/stroke information. Mainly it holds the color and width values to be used for 2D drawing. All draw methods take jsPen object as a parameter. Acts like a pen for drawing.

Constructors:

jsPen()

By default jsPen object is created with black color and 1px width.

// Define a 1 pixel wide drawing pen.
var blackPen = new jsPen();

jsPen(color, width)

Creates the jsPen object with specified color and width.

// Define some 1, 2, and 3 pixel wide drawing pens.
var redPen = new jsPen( new jsColor( "red" ), 1 );
var redPen2 = new jsPen( new jsColor( "red" ), 2 );
var redPen3 = new jsPen( new jsColor( "red" ), 3 );
Parameter Type Description>
color jsColor Color of the jsPen object.
width Number Width of the jsPen object.

Properties:

Name Type Description
color jsColor Color of the jsPen object.
width Number Width of the jsPen object.
Class: jsPoint

This class holds the 2D drawing point information. It holds values of x and y coordinates of the point.

Constructors:

jsPoint()

By default jsPoint object is created with (0, 0) coordinates.

// Create jsPoint object at location x=0, y=0 (bottom left).
var Bottom_Left = jsPoint();

jsPoint(x, y)

Creates the jsPoint object with specified x and y coordinates.

// Draw a line from top-left to bottom-right
var Top_Left = jsPoint( 0, Height );
var Bottom_Right = jsPoint( Width, Height );
obj.drawLine( blackPen, Top_Left, Bottom_Right );
Parameter Type Description
x Number x coordinate of the point.
y Number y coordinate of the point.

Properties:

Name Type Description
x Number x coordinate of the point.
y Number y coordinate of the point.
Class: jsGraphics

This is the main object in the library. This object performs all the drawing activities.

Constructors:

jsGraphics()

By default jsGraphics object is created for the 2D vector drawing directly on the document element.

jsGraphics(canvasDivElement)

Creates the jsGraphics object for the 2D vector drawing on specified div element.

function Draw_Diagonal_Line() {
   // Create jsGraphics object F5AB. Div ID is F5AB_div.
   var F5AB = new jsGraphics(document.getElementById(F5AB_div));
   var Height = document.getElementById(F5AB_div).clientHeight;
   var Width = document.getElementById(F5AB_div).clientWidth;
   var F5AB_X_Origin = 0, F5AB_Y_Origin = Height;
   // Set the point of origin, coordinate system, scale, and grid marking.
   F5AB.setOrigin(new jsPoint( F5AB_X_Origin, F5AB_Y_Origin ));
   F5AB.setCoordinateSystem( "cartecian" );
   F5AB.setScale(1);
   // Turn the background grid "On", "Off".
   Show_Grid( F5AB, "Off", Width, Height );
   // Draw a line from top-left to bottom-right
   var Top_Left = jsPoint( 0, Height );
   var Bottom_Right = jsPoint( Width, Height );
   F5AB.drawLine( blackPen, Top_Left, Bottom_Right );
   // Other drawing commands
   . . .
   . . .
}
Parameter Type Description
canvasDivElement Div Element HTML DIV element on which the shapes to be drawn. This element is used as a canvas for drawing the shapes, showing grid etc.

Methods:

setOrigin(point)

Description: Sets the specified point as the origin of the co-ordinate system used for the 2D drawing. The new drawing is drawn using the specified point as origin set by last call to the setOrigin method. By default point (0,0) is the origin.

Parameter Type Description
point jsPoint The point to be set as a new origin.

getOrigin()

Description: Gets the existing origin of the 2D drawing co-ordinate system.

Return: Returns existing origin of the 2D drawing co-ordinate system. Type: jsPoint

setScale(value)

Description: Sets the drawing scale of the jsGraphics object. The new drawing is drawn as per the scale set by the last call to setScale method. By default the scale value 1. Scale is the factor by which all the metric drawing parameters are converted before drawing the actual pixels.

Parameter Type Description
value Number The value of the scale to be set.

getScale()

Description: Gets the existing scale of the jsGraphics object.

Return: Returns existing scale of the jsGraphics object. Type: Number

setCoordinateSystem(name)

Description: Sets the type of the 2D drawing coordinate system to the specified one.

Parameter Type Description
name String Name of the coordinate system. Possible values are “cartecian” and “default”

getCoordinateSystem()

Description: Gets the type/name of existing 2D drawing coordinate system.

Return: Returns the type/name of existing 2D drawing coordinate system. Type: String

logicalToPhysicalPoint(point)

Description: Converts the logical point in the 2D drawing coordinate system to its analogous point on the canvas document or div element.

Parameter Type Description
point jsPoint The logical point to be converted.

Return: Returns the point on the canvas document or div element analogous to the specified logical point.

drawLine(pen, point0, point1)

Description: Draws a line between the specified points.

obj.drawLine( blackPen, new jsPoint( Start_X, Start_Y ), new jsPoint( End_X, End_Y ) );
Parameter Type Description
pen jsPen jsPen object to be used for drawing line.
point0 jsPoint First point (Start point) of the line.
point1 jsPoint Second point (End point) of the line

Return: Returns the parent div element holding all the content div elements of the line. Type: Div Element

drawRectangle(pen, point, width, height)

Description: Draws a rectangle at specified point, width and height.

obj.drawRectangle( blackPen, new jsPoint( Start_X, Start_Y ), width, height );
Parameter Type Description
pen jsPen jsPen object to be used for drawing rectangle.
point jsPoint Top-Left corner point of the rectangle.
width Number Width of the rectangle.
height Number Height of the rectangle.

Return: Returns the parent div element holding all the content div elements of the rectangle. Type: Div Element

drawPolyline(pen, points)

Description: Draws a polyline (Connected set of lines) connecting to the specified points.

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawPolyline( blackPen, Point_Array );
Parameter Type Description
pen jsPen jsPen object to be used for drawing polyline.
points Array Array of points to be connected by the polyline.

Return: Returns the parent div element holding all the content div elements of the polyline. Type: Div Element

drawPolygon(pen, points)

Description: Draws a polygon with the specified points as vertices.

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawPolygon( blackPen, Point_Array );
Parameter Type Description
pen jsPen jsPen object to be used for drawing polygon.
points Array Array of points to be used as vertices of the polygon.

Return: Returns the parent div element holding all the content div elements of the polygon. Type: Div Element

drawCircle(pen, center, radius)

Description: Draws a circle with specified center point and radius.

obj.drawCircle( blackPen, new jsPoint( Start_X, Start_Y ), Radius );
Parameter Type Description
pen jsPen jsPen object to be used for drawing circle.
center jsPoint Center point of the circle.
radius Number Radius of the circle.

Return: Returns the parent div element holding all the content div elements of the circle. Type: Div Element

drawEllipse(pen, center, width, height)

Description: Draws an ellipse at specified center point with specified width and height.

obj.drawEllipse( blackPen, new jsPoint( Start_X, Start_Y ), 60, 40 );
Parameter Type Description
pen jsPen jsPen object to be used for drawing ellipse.
center jsPoint Center point of the ellipse.
width Number Width of the ellipse.
height Number Height of the ellipse.

Return: Returns the parent div element holding all the content div elements of the ellipse. Type: Div Element

drawArc(pen, center, width, height, startAngle, swapAngle)

Description: Draws an elliptical arc at specified center point with specified width, height, start angle and swap angle.

// Draw an elipse that is centered at Start_X, Start_Y and is 60 pixels wide ahd 40 pixels high.
// Draw from 0 degrees (east) to 180 degrees (west).
obj.drawArc( blackPen, new jsPoint( Start_X, Start_Y ), 60, 40, 0, 180 );
Parameter Type Description
pen jsPen jsPen object to be used for drawing arc.
center jsPoint Center point of the ellipse of which the arc is a part.
width Number Width of the ellipse of which the arc is a part.
height Number Height of the ellipse of which the arc is a part.
startAngle Number Start angle of the arc in degrees.
swapAngle Number Swap angle of the arc in degrees.

Return: Returns the parent div element holding all the content div elements of the arc. Type: Div Element

drawBezier(pen, points)

Description: Draws a cubic Bezier curve with the specified four points.

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawBezier( blackPen, Point_Array );
Parameter Type Description
pen jsPen jsPen object to be used for drawing the Beziercurve.
points Array Array of four points to be used to draw the cubic Bezier curve.
First and Fourth points are used as start and end points respectively while the second and third points are used as control points.

Return: Returns the parent div element holding all the content div elements of the cubic Bezier curve. Type: Div Element

drawPolyBezier(pen, points)

Description: Draws a general Bezier curve with the specified points. The general Bezier curve can be of any degree (linear, quadratic, cubic or more).

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawPolyBezier( blackPen, Point_Array );
Parameter Type Description
pen jsPen jsPen object to be used for drawing the Bezier curve.
points

 Array Array of points to be used to draw the general Bezier curve.
First and Fourth points are used as start and end points respectively while the in between points are used as control points.

Return: Returns the parent div element holding all the content div elements of the general Bezier curve. Type: Div Element

drawCurve(pen, points, [tension])

Description: Draws an open curve passing through the specified points.

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawCurve( blackPen, Point_Array, [tension] );
Parameter Type Description
pen jsPen jsPen object to be used for drawing the curve.
points Array Array of points to be used to draw the curve.
tension Number [Optional] An optional parameter which specifies the tension value to be used to draw the curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the curve. Type: Div Element

drawClosedCurve(pen, points, [tension])

Description: Draws a closed curve passing through the specified points.

Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.drawClosedCurve( blackPen, Point_Array, [tension] );
Parameter Type Description
pen jsPen jsPen object to be used for drawing closed curve.
points Array Array of points to be used to draw the closed curve. 
tension Number [Optional] An optional parameter which specifies the tension value to be used to draw the closed curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the closed curve. Type: Div Element

fillRectangle(color, point, width, height)

Description: Draws a color filled rectangle at specified point, width and height.

var whiteFill = new jsColor("white");
obj.fillRectangle( whiteFill, new jsPoint( Start_X, Start_Y ), width, height );
Parameter Type Description
color jsColor Color to be used for drawing filled rectangle.
point jsPoint Top-Left corner point of the rectangle.
width Number Width of the rectangle.
height Number Height of the rectangle.

Return: Returns the parent div element holding all the content div elements of the rectangle. Type: Div Element

fillPolygon(color, points)

Description: Draws a color filled polygon with the specified points as vertices.

var whiteFill = new jsColor("white");
Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.fillPolygon( whiteFill, Point_Array );
Parameter Type Description
pen jsColor Color to be used for drawing filled polygon.
points Array Array of points to be used as vertices of the polygon.

Return: Returns the parent div element holding all the content div elements of the polygon. Type: Div Element

fillCircle(pen, center, radius)

Description: Draws a color filled circle with specified center point and radius.

var whiteFill = new jsColor("white");
obj.fillCircle( whiteFill, new jsPoint( X, Y ), radius );
Parameter Type Description
pen jsColor Color to be used for drawing filled circle.
center jsPoint Center point of the circle.
radius Number Radius of the circle.

Return: Returns the parent div element holding all the content div elements of the circle. Type: Div Element

fillEllipse(color, center, width, height)

Description: Draws a color filled ellipse at specified center point with specified width and height.

var whiteFill = new jsColor("white");
obj.fillEllipse( whiteFill, new jsPoint( X, Y ), width, radius );
Parameter Type >Description
pen jsColor Color to be used for drawing filled ellipse.
Center jsPoint Center point of the ellipse.
width Number Width of the ellipse.
height Number Height of the ellipse.

Return: Returns the parent div element holding all the content div elements of the ellipse. Type: Div Element

fillArc(color, center, width, height, startAngle, swapAngle)

Description: Draws a color filled elliptical arc at specified center point with specified width, height, start angle and swap angle.

var whiteFill = new jsColor("white");
obj.fillArc( whiteFill, new jsPoint( X, Y ), width, height, startAngle, SwapAngle );
Parameter Type Description
pen jsColor Color object to be used for drawing filled arc.
center jsPoint Center point of the ellipse of which the arc is a part.
width Number Width of the ellipse of which the arc is a part.
height< Number Height of the ellipse of which the arc is a part.
startAngle Number Start angle of the arc in degrees.
swapAngle Number Swap angle of the arc in degrees.

Return: Returns the parent div element holding all the content div elements of the arc. Type: Div Element

fillClosedCurve(color, points, [tension])

Description: Draws a color filled closed curve passing through the specified points.

var whiteFill = new jsColor("white");
Point_Array = [ new jsPoint( X[0], Y[0] ), new jsPoint( X[1], Y[1] ), new jsPoint( X[2], Y[2] ),.. ];
obj.fillClosedCurve( whiteFill, Point_Array, [tension] );
Parameter Type Description
pen jsColor Color to be used for drawing filled closed curve.
points Array Array of points to be used to draw the closed curve.
tension Number An optional parameter which specifies the tension value to be used to draw the closed curve. The default value is 0.

Return: Returns the parent div element holding all the content div elements of the closed curve. Type: Div Element

drawText(text, point, [font], [color], [width], [align])

Description: Draws the specified text at specified point location with various parameters.

// Default font, color (black), width, alignment
obj.drawText( "text", new jsPoint( X, Y ) );

OR

// jsPen color and jsFont defined
blackPen = new jsPen(new jsColor("black"),1);
var Tahoma_12 = new jsFont( "Tahoma, Geneva, sans-serif", "normal", "12px" );
obj.drawText( "text", new jsPoint( X, Y ), Tahoma_12, blackPen.color, width, "center" );

OR

// jsColor and defined jsFont defined
var ColorBlack = new jsColor("black");
var Tahoma_12 = new jsFont( "Tahoma, Geneva, sans-serif", "normal", "12px" );
obj.drawText( "text", new jsPoint( X, Y ), Tahoma_12, ColorBlack, width, "center" );
Parameter Type Description
text String The text content to be drawn.
point jsPoint Point at which the text is to be drawn.
font jsFont [Optional] Font information to be used to draw the text. If not specified default font is used.
color jsColor [Optional] Color to be used to draw the text. If not specified default color is used.
width Number [Optional] Width of the text. Text will be wrapped to fit in the specified width.
align String [Optional] Alignment of the text. Possible values: “left”, ”right”, ”center” and ”justify”.

Return: Returns the parent div element holding the text content. Type: Div Element

drawImage(url, point, [width], [height])

Description: Draws the specified image at specified point.

var URL = "http://www.k7mem.com/images/dummy.jpg");
obj.drawImage( URL, new jsPoint( X, Y ), [width], [height] );
Parameter Type Description
url String Url of the image to be drawn.
point jsPoint Point at which the image is to be drawn.
width Number [Optional] Width of the image. By default the actual image width is used.
height Number [Optional] Height of the image. By default the actual image height is used.

Return: Returns the parent div element holding the text content. Type: Div Element

showGrid([range], [showRange], [color])

Description: Displays the grid as per the 2Dcoordinate system.

Parameter Type Description
range Number [Optional] Grid lines interval. By default canvas-width/10 range will be used.
showRange Boolean [Optional] If true range will be displayed along x and y axis.
color jsColor [Optional] Color of the grid lines. Range and axis colors are darker by 150 than grid color. By default grid lines are shown with RGB(200,200,200) color.

hideGrid()

Description: Hides (clears) the displayed grid.

clear()

Description: Clears the graphics canvas.

Note:

Most of the fuctions return false for invalid parameter(s).

Copyright 2009 jsFiction.com | A project by GlobeFeed.com Terms of Use | Privacy Policy