Touch Grid

Straightforward experiment with a canvas displaying some circles. Move your mouse or fingers over the circles, and they will react.

Your browser does not support canvas.

I wanted to keep the experiment simple and dependency-free, so it’s only listening to mousemove and touchmove events. This means that it doesn’t have full touch and pen support on Internet Explorer. Microsoft’s proposal for pointer events is on its way to becoming a standard (at the time of writing), so one day we may be able to forget about mouse, touch and pen events, and just deal with a single type.

If I didn’t mind another external dependency, I would have gone with a polyfill like Hand.js, which adds pointer event support to every browser.

Check out the code:

Posted on by Daniel Perez Alvarez. Got any comments or suggestions? Send me a tweet or an email.