Irregular Anchors And Shapes Using Js In Html/html5

Is it possible to have irregular shapes like anchors on some surface in JS that can be clickable and it becomes a ball on runtime on page loads? I want to animate that surface that

Solution 1:

Could I suggest an HTML image map? You can embed an IMG tag in the page set it's usemap attribute and then define shapes on that image to be clickable areas.

It doesn't have as many features as a canvas but maybe a regular IMG element will do in this case.

Solution 2:

I suggest using SVG with excelent Raphael js library. You can make interactive animations with pure javascript (i.e. without additional plugins) and those objects can be made irregular anchors (overriding click, mouseover and mouseout events to emulate anchor behaviour).

Another idea is to use HTML5 canvas, but this requires more code (the technology is still immature) and may fail to work under different browsers.