Documentation of jsDraw2D Javascript 2D Graphics Library
jsDraw2D is a Javascript library to draw 2D graphics on web pages 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.
Classes:
Class: jsColor
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.
jsColor(hex)
Creates 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ā€¯. |
jsColor(colorName)
Creates jsColor object with specified name of color.
|
Parameter |
Type |
Description |
|
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.
|
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", "900" |
|
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.
jsPen(color, width)
Creates the jsPen object with specified color and width.
|
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.
jsPoint(x, y)
Creates the jsPoint object with specified x and y coordinates.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
Parameter |
Type |
Description |
|
pen |
jsPen |
jsPen object to be used for drawing the Bezier curve. |
|
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).
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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 2D coordinate 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).