How to go about generating buttons of a custom shape?
Specifically I'm trying to generate something similar to this spiral:
(For the curious, this represents the 88 keys on the piano).
I'm thinking I could mathematically create a set of "perimeter path" points for each button -- that would be easy enough.
What I'm not sure is whether I can create some SVG polygon that is click-able, or whether I need to mathematically process a click to figure out which button it landed closest to.
The buttons will be coloured. When a button is pressed I need it to appear bigger and brighter, then gradually shrink back to its original size and colour.
EDIT: as always I will upload my findings and eventually tidy it up and break it into an answer.
Add onclick and onmouseover to 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 to show that HTML Canvas provides isPointInPath()
