animation - Custom shape (spiral) animated buttons in JavaScript -

animation - Custom shape (spiral) animated buttons in JavaScript -

how go generating buttons of custom shape?

specifically i'm trying generate similar spiral:

(for curious, represents 88 keys on piano).

i'm thinking mathematically create set of "perimeter path" points each button -- easy enough.

what i'm not sure whether can create svg polygon click-able, or whether need mathematically process click figure out button landed closest to.

the buttons coloured. when button pressed need appear bigger , brighter, gradually shrink original size , colour.

edit: upload findings , tidy , break answer.

add onclick , onmouseover canvas element https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/drawing_shapes http://www.rgraph.net/blog/2012/october/new-html5-canvas-features.html http://www.rgraph.net/blog/2014/march/an-example-of-html5-canvas-path2d-objects.html -> https://hacks.mozilla.org/2015/01/canvas-2d-new-docs-path2d-hit-regions/ http://www.html5rocks.com/en/tutorials/raphael/intro/

the above links seem show html canvas provides ispointinpath()

javascript animation button shape