Before jsDraw2D, check the all new jsDraw2DX, SVG Graphics Library for Javascript
jsDraw2D : 2D Graphics Library for JavaScript
Welcome to the home page of Open Source JavaScript Graphics Library: jsDraw2D. This is a pure JavaScript library to draw 2D graphics on web pages inside web browser without using SVG,VML or Canvas. JavaScript developers, web developers and webmasters can take advantage of the library to add graphics drawing functionality to their web applications or websites using the library. The library is entirely written in JavaScript and does not need any plug-in or additional software to run/execute. It works even on not-so-smart small screen mobile browsers too. The JavaScript source code of the library is open and free under a LGPL License.
Today(12-May-2012) we are pleased to launch our new HTML5 ready javascript graphics library jsDraw2DX which is based on SVG and VML
-300
-260
-220
-180
-140
-100
-60
-20
20
40
60
80
100
140
180
220
260
100
80
60
40
20
-20
-40
-60
-80
Curve passing through given points.
Cubic Bezier curve.
Filled, closed curve.
Basic drawing (line, ellipse, polygon).
The diagram above is an example drawn using our jsDraw2D library in JavaScript.View source of this example
Features:
- 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.
|
-60 -20 20 40 60 -60 -40 -20 20 40 default |
-60 -20 20 40 60 60 40 20 -20 -40 cartecian |
|
0 20 40 60 80 100 20 40 60 80 100 default scale = 1, Line (20,20) to (60,50) |
0 20 40 60 20 40 scale = 2, Line (20,20) to (60,50) |
Interactive Demos:
Getting Started:
- 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>
else
<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.
<script type="text/JavaScript">
//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);
gr.drawLine(pen,pt1,pt2);
//Draw filled circle with pt1 as center point and radius 30.
gr.fillCircle(col,pt1,30);
//You can also code with inline object instantiation like below
gr.drawLine(pen,new jsPoint(40,10),new jsPoint(70,150));
</script> - Example source code used to draw the diagram above
<script type="text/javascript">
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.setOrigin(new jsPoint(300,100));
gr.setCoordinateSystem("cartecian");
gr.showGrid(20);
plotPoints(curvePoints);
plotPoints(bezierPoints);
gr.drawCurve(bluePen,curvePoints);
gr.drawBezier(bluePen,bezierPoints);
gr.fillClosedCurve(redPen.color,closedCurvePoints);
gr.drawLine(greenPen,new jsPoint(25,-25),new jsPoint(80,-80));
gr.fillEllipse(new jsColor("aqua"),new jsPoint(100,-55),50,30);
gr.drawPolygon(redPen,polyPoints);
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);
plotPoints(closedCurvePoints);
function plotPoints(points)
{
for( i in points)
{
gr.fillRectangle(new jsColor("green"),new jsPoint(points[i].x-2,points[i].y+2),4,4);
}
}
</script>div>
<script type="text/JavaScript" src="jsDraw2D.js"></script>
Disclaimer & Note:
- Find the disclaimer in Terms of use. Following are additional points of the disclaimer.
- 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.
- In jsDraw2D, the beziers and curve drawing is first time implemented with pure javascript with good enough performance.
- The source code of the library can also be used to study the various computer graphics algorithms.
- Developed by: Sameer Burle
comments powered by Disqus