Finally did the right calculations to ensure that each touch is offset properly onto the canvas element. A small win.
This is the first project where I really want to test on my iPhone rather than simulate the iPhone on Chrome so I can try to register multiple touches on the canvas as well as explore varying force pressure. Without a USB cable with me I decided to go down the path described in this article, which is to use ngrok to tunnel the localhost port to the public.
... and... it works! Viewing on mobile now. Happy.
WHOA, browser-sync works on my phone too! That's probably because of the way browser-sync works - it sends javascript over the wire to the browser(s).
Order of building this up:
- touch -> draw 1 poke hole (circle, black by default)
- touch -> draw bleed from hole down the page infinitely
- touch -> ensure bleed drawing stops once it reached bottom edge of canvas (performance)
- add force multiplier based on touch pressure - failed on iPhone, force always = 1
- add multi-touch support so 3 fingers simultaneously creates 3 bleeding holes
- add varying sizes to poke hole
- add varying colours to bleed
Design decisions:
- Don't fiddle with canvas dynamic resizing. It detracts from the art. I fixed the width to 350px and height to 600px. Done.