How to draw overlay on image using canvas?

Question

I want to draw shape(poly, rect, circle) on image JavaScript. and want to generate Hotspot using selected shape, bellow is example link what I want. And How do I draw overlay an canvas over the image?

eg https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools http://www.maschek.hu/imagemap/imgmap

Answer 1

I've implemented something like this on http://jsbin.com/acuvom/5

Basically it will draw a transparent canvas on the same position with the same width and height as the original image. In my example I moved the image also into a canvas in order to extract the selected area of the image, but you could omit this part.

Drawing on the overlay canvas will draw a semi-transparent area which allows the underlying image to shine through.