Canvas reference: The isPointInStroke() function

Summary: The isPointInStroke() function can be used to determine if the coordinates that you give it are contained within just the stroke of the current path - not the whole area covered by the path

The isPointInStroke() function can be used to determine if the coordinates that you give it are contained within the stroke area of the current path (taking into account things like linewidth, corner styles etc). Not the whole path area.

So with a square, as shown here, the isPointInPath() function checks the total area covered by the square (though keep in mind that half of the stroke will fall outside of the rectangle area) - whereas the isPointInStroke() function just checks the area covered by the stroke.

For example you may have a line chart where you want to check whether any part of the line is clicked or hovered over - the isPointInStroke() function would allow you to do this quite easily. It only determines the current stroke so if you have multiple strokes that you want to test you will need to replay each of them but not draw them on to the canvas and then use the isPointInStroke() function each time.

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

Browser support

Being a newer function it doesn't yet have complete browser support. Browsers that do support it are (as of April 2014, on Windows):

• Chrome
• Firefox
• Opera

And those that don't:

• Safari
• Internet Explorer

Arguments to the function

The isPointinStroke() function can take two or three arguments:

• The path object to check. This argument is optional and if not given the default path is checked.
• The X coordinate
• The Y coordinate

context.isPointInStroke(path, x, y)

context.isPointInStroke(x, y)

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        var radio_stroke = document.getElementById('function_ispointinstroke')
        var radio_path = document.getElementById('function_ispointinpath')
    
        /**
        * When the radio buttons are clicked call the window.onload() function again
        */
        radio_path.onclick   =
        radio_stroke.onclick = function (e)
        {
            // Reset the canvas and redraw it
            canvas.width = canvas.width;
    
            window.onload(e);
        }
        
        /**
        * Set the lineJoin so that you can see it being accounted for by the isPointInStroke() function
        */
        context.lineJoin = 'round';
        
        // Anti-aliasing
        context.translate(0.5,0.5)
        
    
        // Draw something on the canvas
        context.strokeStyle = '#aaa';
        context.beginPath();
        context.lineWidth = 20;
        context.rect(25,25,200,200);
        context.stroke();
        
        /**
        * Draw a highlight area based on the checkbox setting. If the stroke is checked draw another
        * highlighted stroke. If the fill is checked draw a red rectangle
        */
        if (radio_stroke.checked) {
            context.strokeStyle = 'rgba(255,0,0,0.5)';
            context.beginPath();
            context.lineWidth = 20;
            context.rect(25,25,200,200);
            context.stroke();
        
        } else if (radio_path.checked) {
            
            context.fillStyle = 'rgba(255,0,0,0.5)';
            context.beginPath();
            context.lineWidth = 20;
            context.rect(25,25,200,200);
            context.fill();
        }
        
    
        // Install a mousemove event listener on to the canvas
        canvas.onmousemove = function (e)
        {
            // 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 on to the canvas theres no need to replay it
            if (radio_stroke.checked && context.isPointInStroke(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
    
            } else if (radio_path.checked && co.isPointInPath(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
    
            } else {                
                canvas.style.cursor = 'default';
            }
        }
    }
</script>

See also:

• The isPointInPath() function
• The isPointInStroke() HOWTO guide