Как реализовать isPointInPath MouseEvent на нескольких объектах

Question

Я переработал код, и теперь я могу правильно определять событие перемещения мыши внутри цикла или Безье. На холсте нарисованы следующие фигуры:

Ниже приведены коды для рисования фигур: var map

Canvas, tipCanvas, logCanvas;// = document.getElementById('mapCanvas');
var mapCtx, tipCtx, logCtx;// = mapCanvas.getContext('2d');
var circle;// = new Path2D();
var col = 'red';

function init() {

    mapCanvas = document.getElementById('mapCanvas');
    mapCtx = mapCanvas.getContext('2d');

    tipCanvas = document.getElementById('tipCanvas');
    tipCtx = tipCanvas.getContext('2d');

    logCanvas = document.getElementById('logCanvas');
    logCtx = logCanvas.getContext('2d');

    drawCycle();
    //drawBezier();
    // Listen for mouse moves
}

var mouseX = 0;
var mouseY = 0;
var lastMove = 0;
var lastTimeout = 0;
var stopLoop = false;
var i = 0;
var action = false;

function drawBezier (mouse) {

        ctx = ctxMap;

        ctx.save();
        ctx.beginPath();

        ctx.strokeStyle = 'white';
        ctx.moveTo(118.4, 38.1);
        ctx.bezierCurveTo(129.8, 49.2, 137.6, 75.0, 136.8, 90.6);
        ctx.bezierCurveTo(135.8, 109.0, 128.5, 126.2, 125.8, 144.3);
        ctx.bezierCurveTo(124.4, 153.5, 126.7, 158.9, 119.7, 164.2);
        ctx.bezierCurveTo(113.9, 168.6, 104.6, 167.7, 99.9, 174.3);
        ctx.bezierCurveTo(98.0, 177.1, 99.6, 184.2, 98.7, 187.7);
        ctx.bezierCurveTo(97.1, 193.7, 88.9, 202.6, 89.5, 208.4);
        ctx.bezierCurveTo(89.8, 211.7, 96.9, 218.8, 98.5, 222.6);
        ctx.bezierCurveTo(101.1, 228.7, 102.0, 235.4, 104.7, 241.5);
        ctx.bezierCurveTo(107.1, 247.1, 113.6, 252.1, 114.9, 257.5);
        ctx.bezierCurveTo(117.9, 270.7, 100.7, 287.4, 93.9, 297.0);
        ctx.bezierCurveTo(87.1, 306.5, 84.9, 318.0, 74.3, 308.1);
        ctx.bezierCurveTo(67.4, 301.7, 63.0, 289.9, 59.1, 281.5);
        ctx.bezierCurveTo(55.9, 274.6, 53.8, 267.2, 51.6, 259.9);
        ctx.bezierCurveTo(46.7, 243.7, 46.8, 227.2, 43.5, 210.8);
        ctx.bezierCurveTo(39.9, 193.3, 30.3, 177.5, 28.8, 159.5);
        ctx.bezierCurveTo(27.9, 148.0, 29.2, 137.0, 25.0, 126.4);
        ctx.bezierCurveTo(20.6, 115.0, 15.2, 104.7, 12.8, 92.5);
        ctx.bezierCurveTo(9.9, 78.0, 5.6, 63.6, 3.3, 48.9);
        ctx.bezierCurveTo(1.5, 38.2, -3.0, 11.9, 5.6, 2.9);
        ctx.bezierCurveTo(15.4, -7.3, 28.6, 18.3, 32.0, 24.3);
        ctx.bezierCurveTo(35.1, 29.7, 37.6, 39.5, 44.0, 41.4);
        ctx.bezierCurveTo(63.6, 46.9, 58.3, 17.1, 68.5, 11.2);
        ctx.bezierCurveTo(78.5, 5.4, 111.0, 30.9, 118.4, 38.1);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();

        addMouseStoppedEventListener();

    }

    function drawCycle(mouse) {

        ctx = ctxMap;

        var radius = 50;
        var x =  200;
        var y =  100;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 360 * (Math.PI/180), false);
        ctx.fillStyle = 'red';
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'white';
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
        ctx.restore();
        addMouseStoppedEventListener();
    }

, и это функция для ответа на остановленное событие мыши:

function addMouseMoveEventListner() {

mapCanvas.addEventListener('mousemove', function (e) {

    action = true;
    lastTimeout = setTimeout(function () {
        var currentMove = parseInt(new Date().getTime());
        if (currentMove - lastMove > 200) {
            if (action && showLog) Log('- user action: mousestopped --');
            mouseX = e.clientX;
            mouseY = e.clientY;

            Log('stopped at ' + mouseX + ', ' + mouseY);
            stopLoop = false;
            var ctx = mapCtx;
            if (ctx.isPointInPath(e.offsetX, e.offsetY)) {
                if (showLog) Log('in');
                col = 'green';
            }
            else {
                col = 'red';
                if (showLog) Log('out');
            }
            //drawCycle();
            //drawBezier();
            //}
            lastMove = currentMove;
        }
    }, 310);
}, true);

}

, а здесь html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Point in Path</title>
    <script src="JavaScript.js"></script>
</head>
<body onload="init()">
    <div id='map' style="position: absolute; top: 30px; left: 5px; height: 600px; background: black">
        <canvas id="mapCanvas" width="484" height="601" style="position: absolute; left: 0; top: 30px; z-index: 3; background-color: black">Your browser does not support HTML5 Canvas.
        </canvas>
    </div>
</body>
</html>

Теперь моя проблема в том, что я могу сделать это для отдельной фигуры одновременно, например, комментируя drawCycle (), я могу обнаружить мышь над Безье и комментируя drawBezier (), я могу обнаружить мышь над циклом. Когда у меня есть обе фигуры, обнаружение происходит только для последней нарисованной фигуры!

Однако мне нужно нарисовать обе фигуры, и я должен быть в состоянии определить, когда у меня закончился цикл или когда я закончил Безье , Как мне этого добиться?

Я переписал IsPointInPath, чтобы включить время, которое указывает, когда они наведены на фигуру, в течение> 200 мс, и обнаруживает движение, только если оно превышает минимальное количество пикселей. .