jsDraw2D Graphics Library for JavaScript

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).