Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm developing a game in HTML5 and JavaScript using Canvas API for drawing graphics. I want to detect if the user has clicked on a bezier curve which has the line width of 20 pixels (something like this one on the picture). I need to validate if the user has clicked on the area drawn by the curve (red and black).

I implemented such an algorithm for lines, but could not adapt it to quadratic and cubic bezier curves. So I need an algorithm that will compare the position of a point relative to a bezier curve which has the form of

B(t) = P0(1-t)2 + P1(1-t)t + P2t2

or

B(t) = P0(1-t)3 + 3*P1(1-t)t + 3*P2(1-t)t2 + P3t3

and say if it is in the neighborhood of the bezier curve's path, I mean on the black drawn area. enter image description here

[Red: Bezier curve's path; Black: Bezier curve's drawb area]

share|improve this question
add comment

1 Answer

http://stackoverflow.com/questions/2742610/closest-point-on-a-cubic-bezier-curve

In particular, The last answer on the page gives this link, which I thought explained it fairly clearly:

http://jazzros.blogspot.com/2011/03/projecting-point-on-bezier-curve.html?m=1

share|improve this answer
    
Thanks, sometimes it's difficult to define something what you need to search :) now, I'll need to digest a lot of math –  micnic Aug 5 '12 at 7:30
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.