CODEWITHSUNDEEP
javascripthtmlmathcanvas
Tamás
Tamás

Reputation: 1112

How can I test whether a point is part of the quadratic Bézier curve?

I have a shape, in HTML5 canvas, drawn with JavaScript:

ctx.beginPath();
ctx.moveTo(25,0);
ctx.quadraticCurveTo(50,50,40,100);
ctx.lineTo(33,100);
ctx.quadraticCurveTo(50,50,20,0);
ctx.fill();
ctx.closePath();

If a click my canvas, how can I detect that I clicked this shape?

canvas.addEventListener("click",function(e){
     alert(isItPartOfTheShape(e.clientX,e.clientY));
})

function isItPartOfTheShape(x,y){
     /* Here comes the code which detects is it part of the shape */
     return isIt;
}

Upvotes: 2

Views: 399

Answers (1)

6502
6502

Reputation: 114461

You have two choices

  1. implement the point-in-polygon code and bezier curve computation in Javascript
  2. you can use context.isPointInPath that however requires you to rebuild the shape when you do the test (that function checks the specified point only against the current path, i.e. the path that would be filled calling fill)

Upvotes: 1

Related Questions