Monday, December 11th, 2006

Drawling lines in JavaScript

Category: Articles, JavaScript, Library

If you have ever wondered how to use the Bresenham algorithm to draw lines in browsers, it is your lucky day.

The article teaches us the way, and you end up with an API such as:


  1. var g = new Graphics();
  2. g.drawLine(100,50,200,70);
  3. g.paint();

Posted by Dion Almaer at 7:43 am

3.3 rating from 43 votes


Comments feed TrackBack URI

Someone figured it out before:

I used this lib last year, it just plain rocks. It works extremely well and does a great job, fast and cross-browser. What else to ask?

Comment by Adrian — December 11, 2006

While jsgraphics does work, it’s not fast at all unless you’re using it for the simplest graphic elements. The current best way to draw lines is to use the canvas API and get IE support using the google excanvas.

Comment by Karl G — December 11, 2006

A few years ago, I wanted to animate some 3D objects in wireframe in JavaScript. Bresensham wasn’t fast enough and lead to an unpleasant tag soup. So I came up with a slightly less accurate but much faster technique:

Comment by Mathieu 'p01' HENRI — December 11, 2006

p01! haven’t seen you around in a while, man. :)
(Listen to this guy – he’s very smart.)

Comment by Scott Schiller — December 11, 2006

The main advantage of using s to draw graphics is it is more portable than the canvas methods. I’ve been experimenting with graphics for some time and have developed a library which I have used in a drawing application here…

Comment by Guyon — December 11, 2006

I agree. Walter Zorn’s is fantastic.
Anyway.. one thing JS should not be used for is graphics. Can’t print it, can’t copy and paste it.. it’s just stuck there.

Comment by Alexei — December 11, 2006

Wow p01, your implimentation hardly uses any code at at. I love it!
Its so much simpler wow. I am floored.

Comment by Mario — December 12, 2006

It’s risky to do pixel graphics in JavaScript, like it’s bad to do pixel graphics in Java or other language that don’t optimize the process. Some years ago I build a JavaScript plotter for mathematical functions. I had to wait some minutes to create a 200x200px image. You should not use JavaScript to do this.
You should use SVG graphics although the browser with the blue E does not support this. This is a case you should use upcoming standards.

Is there a live demo?

Comment by Andi K — December 12, 2006


I think Walter Zorn’s graphing package is fantastic

i hope you don’t mind me submitting a query – i am trying to create animation where lines are drawn with 2 second delays (a form of animation) – my code is as follows:

var jg = new jsGraphics(‘Canvas’);

it draws everying thing at the same time i.e the setTimeout doesn’t work – any ideas ?



Comment by themetroman — December 23, 2009

Leave a comment

You must be logged in to post a comment.