Creating a Path/Imagemap from a Transparent PNG with Raphael JS

Question

I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to:

• Upon mouse click, pull out the alpha of the current position. or
• Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html)

Answer 1

As raphael is for vector graphics, it is the wrong tool for your problem with png. I think canvas is what you looking for. Load your image in an canvas (the canvas doesent need to be pushed in the DOM). On click check the coords and get the pixel out of the canvas.

But maybe it will be easier to convert you png to vector graphics and use raphael instead.