In canvas, using isPointInPath to change the shape of the cursor only works on part of the path. Solve

found a section of code for drawing k-diagram from the Internet and changed it, and found that the effect is a little different from what you expected. Please take a look at

.

according to reason, as long as the mouse is moved into the drawing path, the cursor will be changed. What"s going on? ask for advice
paste code

.
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="chart" height="500" width="1200" style="margin:30px;"></div>

<script type="text/javascript">
    function goChart(cBox, dataArr){
        // 
        var canvas,ctx;
        // 
        var cWidth, cHeight, cMargin, cSpace;
        var originX, originY;
        // 
        var bMargin, tobalBars, bWidth, maxValue, minValue;
        var totalYNomber;
        var gradient;
        var showArr;

        //
        var dragBarX,dragBarWidth;

        // 
        var ctr, numctr, speed;
        //
        var mousePosition = {};

        // canvascanvas
        canvas = document.createElement("canvas");
        if(canvas && canvas.getContext){
            ctx = canvas.getContext("2d");
        }

        canvas.innerHTML = "HTML5 canvas";
        cBox.appendChild(canvas);

        initChart(); // 

        drawLineLabelMarkers(); // 
        drawBarAnimate(); // 
        //
        var mouseTimer = null;
        addMouseMove();
        function addMouseMove(){
            canvas.addEventListener("mousemove",function(e){
                e = e || window.event;
                if( e.offsetX || e.offsetX==0 ){
                    mousePosition.x = e.offsetX;
                    mousePosition.y = e.offsetY;
                }else if( e.layerX || e.layerX==0 ){
                    mousePosition.x = e.layerX;
                    mousePosition.y = e.layerY;
                }
                mouseTimer = setTimeout(function(){
                    ctx.clearRect(0,0,canvas.width, canvas.height);
                    drawLineLabelMarkers();
                    drawBarAnimate(true);
                    drawDragBar();
                },10);
            });
        }


        // 
        function initChart(){
            // 
            cMargin = 60;
            cSpace = 80;
            //canvas2
            canvas.width = cBox.getAttribute("width")* 2 ;
            canvas.height = cBox.getAttribute("height")* 2;
            canvas.style.height = canvas.height/2 + "px";
            canvas.style.width = canvas.width/2 + "px";
            cHeight = canvas.height - cMargin*2-cSpace*2;
            cWidth = canvas.width - cMargin*2-cSpace*2;
            originX = cMargin + cSpace;
            originY = cMargin + cHeight;
            showArr = dataArr.slice( 0,parseInt(dataArr.length/2) );
            // 
            tobalBars = showArr.length;
            bWidth = parseInt( cWidth/tobalBars/3);
            bMargin = parseInt( (cWidth-bWidth*tobalBars)/(tobalBars+1) );
            maxValue = 0;
            minValue = 9999999;
            for(var i=0; i<dataArr.length; iPP){
                var barVal =  dataArr[i][1][3] ;
                if( barVal > maxValue ){
                    maxValue = barVal;
                }
                var barVal2 =  dataArr[i][1][2] ;
                if( barVal2 < minValue ){
                    minValue = barVal2;
                }

            }
            maxValue += 20;
            minValue -= 20;
            totalYNomber = 10;
            // 
            ctr = 1;
            numctr = 50;
            speed = 2;

            dragBarWidth = 30;
            dragBarX = cWidth/2+cSpace+cMargin-dragBarWidth/2;

        }

        // 
        function drawLineLabelMarkers(){
            ctx.font = "24px Arial";
            ctx.lineWidth = 2;
            ctx.fillStyle = "-sharp000";
            ctx.strokeStyle = "-sharp000";
            // y
            drawLine(originX, originY, originX, cMargin);
            // x
            drawLine(originX, originY, originX+cWidth, originY);

            // 
            drawMarkers();
        }

        // 
        function drawLine(x, y, X, Y){
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(X, Y);
            ctx.stroke();
            ctx.closePath();
        }

        // 
        function drawMarkers(){
            ctx.strokeStyle = "-sharpE0E0E0";
            //  y
            var oneVal = (maxValue-minValue)/totalYNomber;
            ctx.textAlign = "right";
            for(var i=0; i<=totalYNomber; iPP){
                var markerVal =  parseInt(i*oneVal+minValue);;
                var xMarker = originX-10;
                var yMarker = parseInt( originY-cHeight*(markerVal-minValue)/(maxValue-minValue) );

                ctx.fillText(markerVal, xMarker, yMarker+3, cSpace); // 
                if(i>0){
                    drawLine(originX+2, yMarker, originX+cWidth, yMarker);
                }
            }

            //  x
            var textNb = 6;
            ctx.textAlign = "center";
            for(var i=0; i<tobalBars; iPP){
                if(tobalBars>textNb &&  i%parseInt(tobalBars/6) != 0 ){
                    continue;
                }
                var markerVal = dataArr[i][0];
                var xMarker = parseInt( originX+cWidth*(i/tobalBars)+bMargin+bWidth/2 );
                var yMarker = originY+30;
                ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 
            }
            //  y
            ctx.save();
            ctx.rotate(-Math.PI/2);
            ctx.fillText(" ", -canvas.height/2, cSpace-20);
            ctx.restore();
            //  x
            ctx.fillText(" ", originX+cWidth/2, originY+cSpace-20);
        };

        //
        function drawBarAnimate(mouseMove){
            var parsent = ctr/numctr;
            for(var i=0; i<tobalBars; iPP){
                var oneVal = parseInt(maxValue/totalYNomber);
                var data = dataArr[i][1];
                var color = "-sharp30C7C9";
                var barVal = data[0];
                var disY = 0;
                //0 1 2 3   30C7C9  D7797F
                if(data[1]>data[0]){ //
                    color = "-sharpD7797F";
                    barVal = data[1];
                    disY = data[1]-data[0];
                }else{
                    disY = data[0]-data[1];
                }
                var showH = disY/(maxValue-minValue)*cHeight*parsent;
                showH = showH>2 ? showH : 2 ;

                var barH = parseInt( cHeight*(barVal-minValue)/(maxValue-minValue));
                var y = originY - barH;
                var x = originX + ((bWidth+bMargin)*i + bMargin)*parsent;

                drawRect( x, y, bWidth, showH, mouseMove, color,true);  //  x

                //
                showH = (data[3]-data[2])/(maxValue-minValue)*cHeight*parsent;
                showH = showH>2 ? showH : 2 ;

                y = originY - parseInt( cHeight*(data[3]-minValue)/(maxValue-minValue));
                drawRect( parseInt(x+bWidth/2-1), y, 2, showH, mouseMove, color);  //  x
            }
            if(ctr<numctr){
                ctrPP;
                setTimeout(function(){
                    ctx.clearRect(0,0,canvas.width, canvas.height);
                    drawLineLabelMarkers();
                    drawBarAnimate();
                    drawDragBar();
                }, speed*=0.03);
            }
        }

        //
        function drawRect( x, y, X, Y, mouseMove , color){

            ctx.beginPath();
            if( parseInt(x)%2 !== 0){
                x += 1;
            }
            if( parseInt(y)%2 !== 0){
                y += 1;
            }if( parseInt(X)%2 !== 0){
                X += 1;
            }
            if( parseInt(Y)%2 !== 0){
                Y += 1;
            }
            ctx.rect( parseInt(x), parseInt(y), parseInt(X), parseInt(Y) );
            // 
            if(ctx.isPointInPath(mousePosition.x*2, mousePosition.y*2)){
                canvas.style.cursor = "all-scroll";
            }else
                canvas.style.cursor = "default";
            ctx.fillStyle = color;
            ctx.fill();

        }


        //
        drawDragBar();
        function drawDragBar(){
            drawRect( originX, originY+cSpace, cWidth, cMargin, false, "-sharpE8E4F0");
            drawRect( originX, originY+cSpace, dragBarX-originX, cMargin, false, "-sharpBCCEF5");
            drawRect( dragBarX, originY+cSpace, dragBarWidth, cMargin, false, "-sharp078ACB",false,true);
        }

        //
        canvas.onmousedown = function(e){

            if(canvas.style.cursor != "all-scroll"){
                return false;
            }

            document.onmousemove = function(e){
                e = e || window.event;
                if( e.offsetX || e.offsetX==0 ){
                    dragBarX = e.offsetX*2-dragBarWidth/2;
                }else if( e.layerX || e.layerX==0 ){
                    dragBarX = e.layerX*2-dragBarWidth/2;
                }

                if(dragBarX<=originX){
                    dragBarX=originX
                }
                if(dragBarX>originX+cWidth-dragBarWidth){
                    dragBarX=originX+cWidth-dragBarWidth
                }

                var nb = Math.ceil( dataArr.length*( (dragBarX-cMargin-cSpace)/cWidth ) );
                showArr = dataArr.slice( 0, nb || 1 );

                // 
                tobalBars = showArr.length;
                bWidth = parseInt( cWidth/tobalBars/3);
                bMargin = parseInt( (cWidth-bWidth*tobalBars)/(tobalBars+1) );


            }

            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }


    }

    //      
    var dataArr = [
        ["2017/10/1", [2320.26,2302.6,2287.3,2362.94]],
        ["2017/10/2", [2300,2291.3,2288.26,2308.38]],
        ["2017/10/3", [2295.35,2346.5,2295.35,2346.92]],
        ["2017/10/4", [2347.22,2358.98,2337.35,2363.8]],
        ["2017/10/5", [2360.75,2382.48,2347.89,2383.76]],
        ["2017/10/6", [2383.43,2385.42,2371.23,2391.82]],
        ["2017/10/7", [2377.41,2419.02,2369.57,2421.15]],
        ["2017/10/8", [2425.92,2428.15,2417.58,2440.38]],
        ["2017/10/9", [2411,2433.13,2403.3,2437.42]],
        ["2017/10/10", [2432.68,2434.48,2427.7,2441.73]],
        ["2017/10/11", [2430.69,2418.53,2394.22,2433.89]],
        ["2017/10/12", [2416.62,2432.4,2414.4,2443.03]],
        ["2017/10/13", [2441.91,2421.56,2415.43,2444.8]],
        ["2017/10/14", [2420.26,2382.91,2373.53,2427.07]],
        ["2017/10/15", [2383.49,2397.18,2370.61,2397.94]],
        ["2017/10/16", [2378.82,2325.95,2309.17,2378.82]],
        ["2017/10/17", [2322.94,2314.16,2308.76,2330.88]],
        ["2017/10/18", [2320.62,2325.82,2315.01,2338.78]],
        ["2017/10/19", [2313.74,2293.34,2289.89,2340.71]],
        ["2017/10/20", [2297.77,2313.22,2292.03,2324.63]],
        ["2017/10/21", [2322.32,2365.59,2308.92,2366.16]],
        ["2017/10/22", [2364.54,2359.51,2330.86,2369.65]],
        ["2017/10/23", [2332.08,2273.4,2259.25,2333.54]],
        ["2017/10/24", [2274.81,2326.31,2270.1,2328.14]],
        ["2017/10/25", [2333.61,2347.18,2321.6,2351.44]],
        ["2017/10/26", [2340.44,2324.29,2304.27,2352.02]],
        ["2017/10/27", [2326.42,2318.61,2314.59,2333.67]],
        ["2017/10/28", [2314.68,2310.59,2296.58,2320.96]],
        ["2017/10/29", [2309.16,2286.6,2264.83,2333.29]],
        ["2017/10/30", [2282.17,2263.97,2253.25,2286.33]],
        ["2017/11/1", [2320.26,2302.6,2287.3,2362.94]],
        ["2017/11/2", [2300,2291.3,2288.26,2308.38]],
        ["2017/11/3", [2295.35,2346.5,2295.35,2346.92]],
        ["2017/11/4", [2347.22,2358.98,2337.35,2363.8]],
        ["2017/11/5", [2360.75,2382.48,2347.89,2383.76]],
        ["2017/11/6", [2383.43,2385.42,2371.23,2391.82]],
        ["2017/11/7", [2377.41,2419.02,2369.57,2421.15]],
        ["2017/11/8", [2425.92,2428.15,2417.58,2440.38]],
        ["2017/11/9", [2411,2433.13,2403.3,2437.42]],
        ["2017/11/10", [2432.68,2434.48,2427.7,2441.73]],
        ["2017/11/11", [2430.69,2418.53,2394.22,2433.89]],
        ["2017/11/12", [2416.62,2432.4,2414.4,2443.03]],
        ["2017/11/13", [2441.91,2421.56,2415.43,2444.8]],
        ["2017/11/14", [2420.26,2382.91,2373.53,2427.07]],
        ["2017/11/15", [2383.49,2397.18,2370.61,2397.94]],
        ["2017/11/16", [2378.82,2325.95,2309.17,2378.82]],
        ["2017/11/17", [2322.94,2314.16,2308.76,2330.88]],
        ["2017/11/18", [2320.62,2325.82,2315.01,2338.78]],
        ["2017/11/19", [2313.74,2293.34,2289.89,2340.71]],
        ["2017/11/20", [2297.77,2313.22,2292.03,2324.63]],
        ["2017/11/21", [2322.32,2365.59,2308.92,2366.16]],
        ["2017/11/22", [2364.54,2359.51,2330.86,2369.65]],
        ["2017/11/23", [2332.08,2273.4,2259.25,2333.54]],
        ["2017/11/24", [2274.81,2326.31,2270.1,2328.14]],
        ["2017/11/25", [2333.61,2347.18,2321.6,2351.44]],
        ["2017/11/26", [2340.44,2324.29,2304.27,2352.02]],
        ["2017/11/27", [2326.42,2318.61,2314.59,2333.67]],
        ["2017/11/28", [2314.68,2310.59,2296.58,2320.96]],
        ["2017/11/29", [2309.16,2286.6,2264.83,2333.29]],
        ["2017/11/30", [2282.17,2263.97,2253.25,2286.33]]
    ];

    goChart(document.getElementById("chart"),dataArr);




</script>
</body>
</html>
Dec.10,2021

needs to be placed on the onmousemove to determine the mouse position in real time to change the mouse style
you can take a look at my HQChart,
https://github.com/jones2000/.

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b32a7e-341fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b32a7e-341fa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?