Painting shapes in Javascript

Question

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?

Answer 1

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.

Answer 2

There's also the famous canvas painter.

http://caimansys.com/painter/

Answer 3

Try Raphael.

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

Answer 4

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

Answer 5

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