After a good nights sleep I got an idea on how to improve the effiency of my object picking, don't get me wrong, it's still very CPU expensive, but a little cheaper with my new rendering.
My first method was to loop through each item and change its color to another one and then check if the new color was the same that was under the cursor, this is expensive because it has to render, in worst case scenario, n times + 1 ( n == items that need to be check, and one final render).
In my example to the left, I've got 24 items, each being rendered in a for() loop, doing this, everytime the mouse moves over the canvas.
Now in my second method, I pre-generate a color set for all the items, I then render the rose chart once with the new colors and check the color under the mouse against my array of pre-generatated colors. This only costing 1 + 1 renders, so in essence, it should be up to n times more efficient.
My hitbox method works a little different, instead of checking the colors beneath the mouse, I check the mouse coordinates relative to each item, this method is inexpensive and very fast, but when dealing with none square objects, it's also very inaccurate, possibly triggering more than one object. (Though this method is still used in the line-diagram type).
And to not bore you out too much, I've also added som new tricks in the class.diagram.js (29.74 kB) (a pie-chart, multicolors and the new object picking method, changelog in the file.)