Drawing in javascript with divs

Question

In my quest to learn javascript (which seems to be my latest source of questions for SO these days) i've found this API for drawing http://www.c-point.com/javascript_vector_draw.htm

Meanwhile I've been making some experiments with graphics, which tend to be heavy on the amount of stuff to draw. This guy is drawing with divs, every square part of the image is a div. You can easily check it by inspecting his example at the page.

He goes to making divs 1px/1px to draw a pixel

Now what i have to ask is the following:

Is this the best method? It seems quite heavy when a drawing is more elaborate. Which other methods would you sugest?

This Javascript drawing library? already has a couple of links to libs so no need to put any here.

I've seen here in SO other questions regarding drawing. I'm just wondering to which point drawing with divs isn't awful!

Answer 1

for vector drawing, libraries like Raphael provide a consistent API over SVG and VML.

for raster drawing, you can use <canvas> for browsers that support canvas.

for IE, you would default to DIVS or have your drawing API use silverlight if it's available. Note that for efficiency, divs should not be 1px by 1px but rather be as long as necessary for the shape you are drawing. 20 1-pixel divs of the same color should be 1 div that is 20 pixels wide. Generally you won't get very interactive with the div approach, because the browser you're targetting (IE) has slow DOM access

EDIT: The linked library does do the div-optimizations.

for HTML-only solutions (no SVG/VML/canvas) you use css and custom border-widths:

Answer 2

Not, it is the worst method, elaborated before there was SVG or canvas elements... It would be very heavy on memory and very slow. An amusing, interesting hack, but not really usable in the real world.

Beside the libraries mentioned in the other thread, relying on canvas/SVG/VML, I saw games made with sprites, ie. some images positioned absolutely. There was also an awesome hack coding a first-person 3D shooting game in 5k of JavaScript, using generation of XBM images on the fly. But support for this image format have been removed from recent versions of Windows... :-(

Come to think of it, you can also make images using "data:image/png;base64" protocol, but the encoding would be quite slow, and IE browsers would be out.

Answer 3

Before starting messing up with 1px divs, check out dojox.gfx: docs, tests, demos (last two links to the nightly snapshot on the test server optimized for debugging, not for production).

It uses native graphics: SVG, VML, Silverlight or Canvas — whatever is available on the client covering all major browsers (IE, Firefox, Safari/Webkit, Opera).