Context.isPointInPath usage

Question

I googled for this but didn't find any example that uses Context.isPointInPath in HTML 5.

I know it's supposed to return me true if the point is on the current path, but how exactly do you use it? Should you use it in between context.beginPath() and cotext.closePath() (or fill* for that matter)

I tried this:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillRect(0,0, 100,100);
ctx.isPointInPath(50,50); // Returned false
ctx.isPointInPath(50,0);  // Tried it on the actual path, not the filled region, returned false
ctx.isPointInPath(50,8);  // My canvas had the default 8 offset, returned false
ctx.isPointInPath(50,9);  // Canvas had a border of 1px, returned false

I don't know what went wrong, but all of them returned false and I never had one returning true.

Finally, I closed the path and checked for the values, still returned false.

Answer 1

All of your calls to isPointInPath() are returning false because you aren't actually creating any paths when you are working with your context. The fillRect() function doesn't create a path. It just fills in some pixels on your canvas with whatever color you previously specified.

Instead, you will want to use one of the path-modifying functions, such as rect() or moveTo(). For all the details on isPointInPath() and the path functions, refer to the canvas spec here:

isPointInPath(): http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-ispointinpath

path functions: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#complex-shapes-%28paths%29