- With jsDraw2D, you can draw advance drawings like cubic Bezier curve, general Bezier curve (The general Bezier curve can be of any degrees including linear, quadratic and cubic), open curve passing through given points and closed curve passing through given points.
- You can draw all basic drawings like line, rectangle, polyline, polygon, circle, ellipse and arc. Also you can draw text or image at specified point location.
- You can draw filled rectangle, polygon, circle, ellipse, arc and closed curve.
- This is a kind of make-it-work-every-where library so that your web page will display the graphics not only on modern browsers, old browsers, android and smart phones but also on many of not-so-smart small screen phones too.
- By default, the orgin(0,0) of a document or a div element is top left corner, but with jsDraw2D you can set the orgin for drawing at any location/point on the document or the div element.
- jsDraw2D provide two options for co-ordinate system; "default" and "cartecian". In "default" system, on x axis, values above origin are positive and values below origin are negative while in "cartecian" system it is opposite. Following diagram will illustrate it better.
- One more important feature is that you can specify scale of the drawing so that instead of using 1px as unit, you can specify your own value of scale. To get better idea about the scale, please see the illustration below,
- As you can see in above diagrams, you can optionally display grid/axis or range along the x and y axis.
- Supports most of the modern web browsers. Please note that the performance can be different in different browsers. Tested on IE 7, Mozilla Firefox 3, Google Chrome, Opera 9.64 and Safari 4 with Windows XP.
- The number of div elements composing the diagrams are optimized to get efficient performance. Still as an ongoing activity, we will try to achieve more optimization and better performance as much as possible.
- The library includes jsColor class which provides various color related functionality like converting RGB to Hex and vice versa, getting darker or brighter shade of the given color.
- The library is designed in object oriented manner. This makes the developers to have many of the advantages of object oriented design.
- Download jsDraw2D and copy it to the same folder in which your web page is present. If you want to copy it to another folder then you have to specify the src parameter as appropriate relative path. Please do not use the jsDraw2D.js file from our website directly.
- Add following code inside <head> tag or just after <body> start tag.
The html div element on which you are going to draw, should have style as specified for the div element below,
If drawing is to be limited within the width and height of the canvas div element.
<div id="canvas" style="overflow:hidden;position:relative;width:600px;height:300px;"></div>
<div id="canvas" style="position:relative;width:600px;height:300px;"></div>
You can use multiple div element for drawing. Then you require to create that many objects of jsGraphisc .(You will come to know in detail about jsGraphics object letter on this page)
- Now you are ready to start drawing. Add <script> tag anywhere after the
canvas <div> tag. The best place to add the <script> tag is just before
the end of <body> tag. Write the code in the manner shown below.
//Create jsGraphics object
var gr = new jsGraphics(document.getElementById("canvas"));
//Create jsColor object
var col = new jsColor("red");
//Create jsPen object
var pen = new jsPen(col,1);
//Draw a Line between 2 points
var pt1 = new jsPoint(20,30);
var pt2 = new jsPoint(120,230);
//Draw filled circle with pt1 as center point and radius 30.
//You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150));
- Example source code used to draw the diagram above
var gr=new jsGraphics(document.getElementById("canvas"));
var redPen=new jsPen(new jsColor("red"),1);
var greenPen=new jsPen(new jsColor("green"),3);
var bluePen=new jsPen(new jsColor("blue"),1);
var curvePoints=new Array(new jsPoint(28,35),new jsPoint(52,16),new jsPoint(177,38),new jsPoint(149,85),new jsPoint(57,92));
var bezierPoints=new Array(new jsPoint(-283,10),new jsPoint(-206,95),new jsPoint(-24,90),new jsPoint(-56,10));
var closedCurvePoints=new Array(new jsPoint(-265,-50),new jsPoint(-68,-23),new jsPoint(-114,-50),new jsPoint(-58,-95));
var polyPoints=new Array(new jsPoint(160,-50),new jsPoint(190,-80),new jsPoint(240,-15),new jsPoint(260,-67));
gr.drawLine(greenPen,new jsPoint(25,-25),new jsPoint(80,-80));
gr.fillEllipse(new jsColor("aqua"),new jsPoint(100,-55),50,30);
var font=new jsFont("arial","bold","12px");
gr.drawText("Curve passing through given points.",new jsPoint(200,80),font,bluePen.color,90);
gr.drawText("Cubic Bezier curve.",new jsPoint(-220,40),font,bluePen.color,110);
gr.drawText("Filled, closed curve.",new jsPoint(-60,-25),font,bluePen.color,60);
gr.drawText("Basic drawing (line, ellipse, polygon).",new jsPoint(25,-80),font,bluePen.color);
for( i in points)
gr.fillRectangle(new jsColor("green"),new jsPoint(points[i].x-2,points[i].y+2),4,4);
The jsDraw2D library is open source and free; licensed under LGPL.
Disclaimer & Note:
- We would like you to note that the curve drawing using the library may not be accurate and error-free. The algorithm is developed to have good enough balance between accuracy and performance.
- Testing is not done on all web browsers and operating systems and mobiles.
Design & Development:
- Efficient line, circle and ellipse drawing algorithms are based on mid-point algorithm originally invented by Bresenham.
- The source code of the library can also be used to study the various computer graphics algorithms.
- Developed by: Sameer Burle