views:

1962

answers:

5

Is there any good alternative to the html5-element canvas to paint shapes like hexagons using javascript, that works cross-browser (including the horrible IE6)?

I have been using jQuery and jQuery maphighlight for this, but it doesn't give me enough possibilities to manipulate the shapes and colors after it's first rendered.

Am I missing some features in jQuery maphighlight, or are there any other plugin for either jQuery or mootools, that can provide me with this painting capabilities?

+1  A: 

I always like the prossessing port to javascript. You can find that here it's very good to draw stuff. Maybe you can check it. It's not an addon to jquery but it is very powerful.

It does use the HTML5 Canvas element though :(

A few versions ago it only worked in the new browsers. I don't know if it has been ported already to the previous ones.


One other API I've found which uses divs to make draws is this one If you want to draw limited stuff it is ok to use it. But be careful as when the amount of draws increase, the scture of the HTML gets a bit heavy

fmsf
A: 

There's also the famous canvas painter.

http://caimansys.com/painter/

SleepyCod
But does it work in ie6?
elzapp
Yes it does sir !
SleepyCod
+2  A: 

Try Raphael.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+, Chrome 2.0+ and Internet Explorer 6.0+.

nickf
This looks very promising
elzapp
+12  A: 

You should take a look at RaphaelJS. It is a JavaScript, cross-browser wrapper library around Canvas, SVG, and VML (an IE-only vector markup language that predates SVG, used in IE6). Using RaphaelJS, you can generate a very wide range of vector graphics using JS that is compatible with a very broad range of browsers.

http://raphaeljs.com/

RaphaelJS is also very compatible with jQuery, and follows a lot of the same call-chaining that you see in jQuery. The two make a great pair.

jrista
This looks very promising
elzapp
Its a great library. I've used it on several occasions to create simple javascript based graphs, charts, and diagrams. Its simple, and doesn't give you the full set of capabilities from Canvas, SVG, and/or VML...but it does enough that it is useful in most cases.
jrista
This is awesome, and it really nailed my problem :D
elzapp
+1  A: 

You can use SVG implementation found in Ample SDK that works in Internet Explorer too. You will get standard-based API (DOM Level 2/3) and a markup notation (SVG1.2 Tiny).

Here is a pair of examples:

  1. SVG Tiger
  2. SVG+SMIL/DOM
Sergey Ilinsky