Draw and paint areas in images

How to draw areas in a image, based on points, like draw areas in google maps? Dynamically with javascript.

Editing: The question is about to put a map image on the page and draw an area on the top of a hous开发者_运维技巧e, for example.

Use the canvas element.

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.

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