How to do a screen capture of content on web page/join 2 images

[raabie]

I have a page where I am using Raphael.js to actually allow user to move a dot around the canvas which has a background image. What I am trying to do is to capture the end image of the canvas where I'll be able to see where the user placed the dot after the user clicks on a 'confirm position' button. I've thought of two methods, however I am not too sure of how to execute them.

Method 1: Just capture the canvas as an image. Somehow this isn't possible with Javascript alone and I'm not too sure if Raphael has a built in function to allow this. I also read about exporting the svg xml file and pass it through the a library like 'Batik' however I'm not exactly sure how to do that. The tutorials I've read are really confusing.

Method 2: To use the coordinates of the dot and overlay a dot image that I already have onto the background image and save it as an image.

Please advice and I hope I've been clear

[Norm]

Java has a class: Robot that can capture a screen image.
to use it in an Applet requires giving the applet permission.

[raabie]

Thks norm, however it does not allow me to dynamically capture the area I want. e.g, if the user resizes the window, it captures the screen which i do not want. Is there any way I can make it capture the pixel area based on a specific window?

[Norm]

Is there a way to get the location and size of the window? Read the API doc for the Applet class and its parents.
Is there a way for the Robot class to get the screen pixels for a specified rectangle on the screen? Look at the API doc for Robot.