Change mouse cursor while hover over specific canvas paths with Paper.js

jevgenij picture jevgenij · Apr 9, 2013 · Viewed 7.4k times · Source

Actually (using w3.org doc's example http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#dom-context-2d-ispointinpath) I did figured out how it could be done in raw HTML5Canvas/JavaScript: http://jsfiddle.net/QTu9E/4/

Above I used isPointInPath(x, y) syntax, but according to mentioned docs there is also isPointInPath(path, x, y[, w ]) in which certain path can be given to check.

This one could be problem solver, but I can't get it work just passing paperjs's Path object into it!

I'll continue searching for solution, because as anyone else I have my deadlines, but any help would be appreciated!

Answer

Sean Bradley picture Sean Bradley · Jan 30, 2019

Try the onMouseEnter and onMouseLeave events and change the css style of the paperjs containers html dom element.

http://paperjs.org/reference/item/#onmouseenter

yourPath.onMouseEnter = function (event) {
    paperCanvasContainerDiv.style.cursor = "pointer";
}
yourPath.onMouseLeave = function (event) {
    paperCanvasContainerDiv.style.cursor = "default";
}