Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

for quadratic bezier curves or

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

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]

share|improve this question

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

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

Your Answer


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.