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) = P_0 (1-t)^2 + P_1 (1-t)t + P_2t^2$$

for quadratic bezier curves or

$$ B(t) = P_0 (1-t)^3 + 3P_1 (1-t)t + 3P_2(1-t)t^2 + P_3t^3$$

for cubic bezier curves, and check 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 drawn area]



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


| improve this answer | |
  • \$\begingroup\$ Thanks, sometimes it's difficult to define something what you need to search :) now, I'll need to digest a lot of math \$\endgroup\$ – micnic Aug 5 '12 at 7:30
  • \$\begingroup\$ The second link here is dead. \$\endgroup\$ – GrimGrom Dec 14 '17 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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