Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.



Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List


Ahmad Masykur

Drawing using JavaScript and jQuery

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>

The result of rendered document is


I hope this trick is useful.

Categories: JavaScript
Permalink | Comments (2) | Post RSSRSS comment feed


Ronald Widha U.A.E. | Reply

Wednesday, April 08, 2009 1:31 PM

Ronald Widha

What do you think this will be used for?
Obviously animated gif have been the de facto standard for 'faking' dynamicity in the web realm.
Is it more for writing our own custom transition animation perhaps?

Ahmad Masykur Indonesia | Reply

Wednesday, April 08, 2009 1:45 PM

Ahmad Masykur


It just give you altenative way to draw line and circle without images. This trick should not be implemented in real world because it's very ugly performance. Alternatively, you can create Flash with actionscript inside or Silverlight with javascript support.

Add comment

  Country flag

  • Comment
  • Preview