Search code examples
javascriptjquerycsscanvaspaperjs

Paper.js mouse events not translating with canvas transforms


For performance and aesthetic reasons, I am transforming a canvas with a Paper.js "drawing" in it with a CSS transform (rotation). Basically, on scroll, the canvas rotates, with a transition-duration to smooth it out.

On top of that, my Paper.js paths have mouse events on them so that on hover they change color. However, when the CSS transform is applied to the canvas, the mouse events "disappear," for lack of a better word, and they don't work. I guess somewhere along the line, the CSS transform is working on the canvas drawn elements but is skipping over or applied differently on the mouse events created by Paper.js tied to my paths. Is there any solution?


Solution

  • I have answered the same question here: https://github.com/paperjs/paper.js/issues/945