The isPointInStroke() function
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
isPointInStroke()
function isn't supported by Microsoft
Internet Explorer.
An example of the difference of the
isPointInStroke()
function compared to the isPointInPath()
function when used to
change the mouse pointer
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 onto 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>