Drawing with the mouse in javascript

[Atheus]

I'm writing some image maniplation tools for a web application and I need the user to be able to select an area in an image by drawing a rectangle on it in a browser. I know I can get the position of the mouse and send that information to the server, but i'd like to be able to see the rectangle as it is described, which requires real time drawing in response to mouse movement. Any ideas on how I can do this in javascript? Or even not in javascript? All help is much appreciated.

 

[BigPoppa]

I suck at programming, but heres a method you could try. Take the first position of where they click the mouse (x,y) and then a new position whenever they move the mouse, as long as the mouse button is still held down. Draw a rectangle according to the difference in x values and y values. The hard part comes in making javascript do the draw. Can't really help you there.

 

[KB]

If you can get the mouse coordinates with the mousemove events, then all you need to do is draw the shapes based on the mouse coordinates. This guy has a vector based drawing library in javascript that will do the drawing.

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

 

[Atheus]

Originally posted by: KB
If you can get the mouse coordinates with the mousemove events, then all you need to do is draw the shapes based on the mouse coordinates. This guy has a vector based drawing library in javascript that will do the drawing.

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Yea i've seen that before, very cool, the drag and drop stuff is also impressive. I didn't think it was designed to draw in real time though... I suppose I could call the draw functions on a timer to get some simple animation...