Placing points on top of an image using HTML / Javascript

Question

I would like to find some code or technique for placing dots on top of an image in HTML. When the user clicks on the image, the javascript event calls the function with the x, y positions of the pointer relative to the beginning of the image. Ideally, the user will also be able to zoom in / out on large images that cannot fit on the page.

Thanks for any help / ideas!

Answer 1

Looks like you should take a look at HTML5, especially the Canvas element:

Here are some resources:

• Reference documentation
• How to draw using HTML5 canvas
• Lets call it the drawing surface.