Drawing functionality is not supported in most of popular browsers except Firefox and Safari with Canvas object. Using little trick we can draw line and circle using JavaScript. This is not best practice because need lot of execution time but it can be alternative way to draw simple and little objects.
Basically this trick is drawing many DIV elements with 1x1 pixel size inside the document. Basically we can't draw 1x1 pixel suze DIV element in IE. To resolve this issue, you can add IMG element inside the DIV with 1x1 pixel image. Here's the complete code to draw line and circle into HTML document.
<html>
<head>
<title>Drawing</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
line(50,30, 100, 150);
circle(110,110, 100);
});
function line(x1, y1, x2, y2) {
c = $(document.body);
var dx = Math.abs(x2-x1);
var dy = Math.abs(y2-y1);
var d = Math.max(dx, dy);
var i=0;
for(i=0; i < d; i++) {
var img = $(document.createElement('img')).attr('src', 'blank.gif');
var div = $(document.createElement('div')).width(1).height(1).css({'background-color': '#f00', position: 'absolute', left: Math.min(x1,x2)+(i*dx/d), top: Math.min(y1,y2)+(i*dy/d) });
div.append(img);
c.append(div);
}
}
function circle(x, y, r) {
c = $(document.body);
var l = 2 * Math.PI * r;
var i=0;
for(i=0; i < l * (1+((10-Math.log(r+1))/10)); i++) {
var x2 = r * Math.sin(360 * i/l);
var y2 = r * Math.cos(360 * i/l);
var img = $(document.createElement('img')).attr('src', 'blank.gif');
var div = $(document.createElement('div')).width(1).height(1).css({'background-color': '#f00', position: 'absolute', left: x+x2, top: y+y2 });
div.append(img);
c.append(div);
}
}
</script>
</head>
<body>
</div>
</body>
</html>
I hope this trick is useful.