Scratch Top Image Using Custom Cursor

I’m working on a project that uses the scratch.js for erasing the top image to view the bottom.
What I need for this project to do is have a custom cursor to erase the top image.
I included the code,


in the ScratchPad function.
It works like it should in Safari on the desktop. It’s so cool!

The erase feature works on the iPad but the custom cursor does not display.
Is there a way for the custom cursor to display on the iPad as well as erase the top image?

I’ve included the project file. (2.4 MB)

I appreciate any help I can get.
Thanks so much!

For what it’s worth, it doesn’t work at all on Chrome.

1 Like

Mobile browsers don’t support custom cursors since they have no cursors. You would probably need to have an actual element that is set to move with touches on touch start, adjust it on touchmove, and then hide it on touchend via javascript code.


Thank you Jonathan. Would I be able to modify the code being used now or is there javascript I can find on the internet to make this work?
I tried modifying the javascript I have but I wasn’t successful.
Help is greatly appreciated!
Marian (2.3 MB)

Thanks for checking Nathan!
I thought since it works in Safari, that it would work in Chrome.
I noticed it doesn’t work on Firefox either.
Much appreciated!!

I’m not familiar with the scratch.min.js you are using. You may want to contact the authors; it seems like having this work on mobile would be a common improvement they would want to make.