isPointInPath sometimes returns wrong value

[tsofiyai]

Hi

Thank you for your great polyfill.
I do have a small problem with it: isPointInPath sometimes returns a wrong value - true instead of false, and false instead of true.
My application draws a dial which can be turned around. After adding your script, the dial sometimes doesn't turn, even though the touch point is on it.
Do you have an idea what could be the cause of this? I can give more details if needed, just don't want to overwhelm straight out.

Thank you

[jondavidjohn]

Thanks for the report! Conceptually this makes sense since we are tinkering with the drawing dimensions behind the scenes. In reviewing the documentation for isPointInPath, it looks like it can sometimes take arguments that are not just x and y. Do you happen to be using any of those arguments? fillRule or path?

This fix might entail overriding isPointInPath and explicitly handling the argument cases with some type checking, etc... Because we only want to inflate the x / y arguments, not the possible Path2D or fillRule.

The quickest path to a fix would likely be writing a few simplified failing tests that emulate your use case here.

[tsofiyai]

Hi,

Thank you for your quick reply.

As for your question about the fillRule or path arguments, I did not use any of them.

Unfortunately, I have never written tests and don't know how to use them.

Here is a simplified example of what I'm trying to achieve (I use d3.js):

HTML:

<canvas id="test-canvas" width="310" height="310" style="background-color:transparent; border-radius:50%; border:1px solid orange;" />

JS:

    var testCanvas = d3.select("#test-canvas"),
    testCtx = testCanvas.node().getContext("2d");

    testCanvas.on("touchstart", function (e) {
        var mouse = d3.mouse(this);
        var isInPath = false,
            isInPath2 = false,
            mouseX = mouse[0],
            mouseY = mouse[1];
        var cx = testCanvas.node().getBoundingClientRect().width / 2;
        var cy = testCanvas.node().getBoundingClientRect().height / 2;
        testCtx.strokeStyle = "black";

        //outer circle
        testCtx.save();
        testCtx.translate(cx, cy);
        testCtx.beginPath();
        testCtx.arc(0, 0, 145, 0, Math.PI * 2, false);
        testCtx.stroke();
        testCtx.closePath();
        testCtx.restore();
        isInPath = testCtx.isPointInPath(mouseX, mouseY);

        //inner circle
        testCtx.save();
        testCtx.translate(cx, cy);
        testCtx.beginPath();
        testCtx.arc(0, 0, 75, 0, Math.PI * 2, false);
        testCtx.stroke();
        testCtx.closePath();
        testCtx.restore();
        isInPath2 = testCtx.isPointInPath(mouseX, mouseY);

       if(isInPath && !isInPath2){
            d3.event.preventDefault();
            console.log('should rotate');
        } 
    });

Thank you for your help