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:
JAVASCRIPT:
-
-
var g = new Graphics();
-
g.drawLine(100,50,200,70);
-
g.paint();
-
3.2 rating from 30 votes
Someone figured it out before:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
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?
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.
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:
http://www.p01.org/articles/DHTML_techniques/Drawing_lines_in_JavaScript/
p01! haven’t seen you around in a while, man. :)
(Listen to this guy - he’s very smart.)
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… http://www.webreference.com/programming/javascript/gr/column22/index.html
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.
Wow p01, your implimentation hardly uses any code at at. I love it!
Its so much simpler wow. I am floored.
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 200×200px 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?