Using Context.isPointInPath

Question

I searched Google for this, but did not find an example that uses Context.isPointInPath in HTML 5.

I know that it should return me true if the point is on the current path, but how exactly do you use it? If you use it between context.beginPath() and cotext.closePath() (or fill in *, 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 they all returned with an error, and I never had the truth.

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

Answer 1

All of your calls to isPointInPath() return false because you are not actually creating any paths when working with your context. The fillRect() function does not create a path. It just fills some of the pixels on your canvas with whatever color you previously indicated.

Instead, you will want to use one of the path change functions, for example rect() or moveTo() . For all isPointInPath() details and path functions, see 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