About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

The isPointInPath function

The isPointInPath function can be used to determine if the coordinates that you give it are contained within the current path or not. It only determines the current path so if you have multiple shapes that you want to test you will need to replay the paths but not stroke or fill them (so that they're not drawn onto the canvas) and then use the isPointInPath function each time. The isPointInPath function can be used to determine hits for complex shapes that involve angles or curves. For example, the Funnel chart and drawing api Marker1 objects use the function to facilitate hit testing.

The function only gives you a true or false as to whether the coordinates that you give it are in the path. So you need to create your own functions to get the mouse coordinates and also take the relevant action should the point that you give it be in the current path.


Arguments to the function

The isPointinPath function can take two or three arguments:

context.isPointInPath(path, x, y)
context.isPointInPath(x, y)

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');
    
        // Draw something on the canvas
        context.beginPath();
        context.rect(25,25,50,50);
        context.fill();
    
        // Install a mousemove event listener onto the canvas
        canvas.onmousemove = function (e)
        {
            var canvas = e.target;
            var context = canvas.getContext('2d');
    
            // This gets the mouse coordinates (relative to the canvas). It uses the RGraph.getMouseXY(event)
            // function
            var mouseXY = RGraph.getMouseXY(e);
            var mouseX  = mouseXY[0];
            var mouseY  = mouseXY[1];
    
    
            // Because the rect was the last path drawn onto the canvas theres no need to replay it
            if (context.isPointInPath(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
                return;
            }
    
            canvas.style.cursor = 'default';
        }
    }
</script>

See also