Draw and paint areas in images

Question

Anyone knows a way to draw areas in a image, based on points, like draw areas in google maps? Dynamically with javascript.
Editing: what I will do is put a map image on the page and draw an area on the top of a house, etc... Thanks.

Answer 1

Use the canvas element.

Answer 2

Another option is to use SVG or VML (IE only). Although canvas tags are certainly the easiest.

I experimented with dynamically created SVG through javascript a while back: here's an example usage.

Answer 3

In addition to the JavaScript solution, you could always use PHP to dynamically draw lines. Then place the newly-created image on top of the map image.

Here is a small tutorial: Drawing shapes with GD