0

As part of a Funnel chart I'm drawing parallelograms on a canvas. To facilitate clicking on the parallelograms (ie the segments of the Funnel) I'm storing the coordinates and doing checks on the mouse coords to see if the mouse is in the correct area. This works just fine and dandy.

However now I've come across the .isPointInPath() method (its only taken four years). So I'm wondering if it would be faster (it would certainly be easier), to use those coords) to:

1) Replay the path without stroking or filling it so it's not visible 2) Check the mouse coords using this .isPointInPath() method

When a click occurs and the checks commence there could be multiple segments to check - eg 5.

Richard
  • 4,809
  • 3
  • 27
  • 46

1 Answers1

0

Usually depending on the stroke or the filling of your figures the mouse detection coordinates should change (from a pixel perfect detection point of view) so when redrawing your parallelograms you should be as accurate as possible.

With this said, usually the best approach is to do this operations in an off-screen canvas. You can use a secondary canvas to redraw your parallelograms one by one and check your condition as you well said using isPointInPath(). You must be very careful whit this method though, as it returns true if the point is in the current default path of the canvas and depending on how you're drawing your figures it may not always do what you expect :)

Another solution is to draw the figures one by one, and use getImageData() to detect if there is color in the coordinates of the mouse which would imply a hit on the figure. You can see an example here

Hope this helps

Community
  • 1
  • 1
jbalsas
  • 3,484
  • 22
  • 25
  • It does - I've seen the secondary canvas approach mentioned before in a "improve your canvas speed" article on HTML5 rocks (iirc) - would this offer any speed up over pathing the shape on the onscreen canvas but not stroking it (so it is not painted to the screen)? – Richard Aug 27 '12 at 10:07
  • It probably would as it doesn't even need to get rendered. However, for me the main reason to use a secondary canvas in your case is for you not to mess up your canvas with operations that aren't really meant to be seen. Also, if I remember correctly the article you're referring to uses other canvas to pre-render (do some calculations) before the actual render, so I'd say the use case is slightly different. – jbalsas Aug 27 '12 at 11:09
  • Thanks. Looking at the canvas spec the forthcoming Paths may render this question moot. – Richard Aug 27 '12 at 12:59