Enable Pointer Event use

There's been a few requests to get a stylus/drawing tablet to work with roll20 and the general consensus of the Roll20 staff is either it's the manufacturers of the tablet's fault or you don't officially support pointer.

https://app.roll20.net/forum/post/5973367/slug%7D
https://app.roll20.net/forum/post/8372158/slug%7D
https://app.roll20.net/forum/post/7033602/slug%7D

I dug through the minified app.js and saw you use fabric.js to manage drawing, which then led me to the fabric.js source and found out that you can get proper pointer events instead of mouse events by enabling it as an option with `{enablePointerEvents: true}`.

My initial suggestion was going to be change:

d20.engine.canvas = new fabric.Canvas(d20.engine.work_canvases.main.canvas, d20.engine.uppercanvas, { controlsAboveOverlay: true})

to

d20.engine.canvas = new fabric.Canvas(d20.engine.work_canvases.main.canvas, d20.engine.uppercanvas, { controlsAboveOverlay: True, enablePoinerEvents: true })

However I noticed that you're running version 1.2.14 of fabric.js which doesn't support pointers because it's from 2013 which was before pointer events were a thing (looks like pointer events were added to browsers in 2014). So I ask can you please update your libraries to less than 7 years out of date and enable modern input devices?

Here’s a Firefox work around for those who want it sooner but don’t want to wait for Roll20 to patch it (it should work for Chrome just haven’t tested it).

To run the script you hit F12 (on Firefox) when the game is loaded up and paste the code into the console and submit with enter

// denyCookies disables NewRelic which is used for tracking but creates its own wrapper of the eventListeners so can’t unregister the mouse versions.
// In the Roll20 code the cookie is checked before registering events so when running the script you might have to reload the page and rerun the script
denyCookies();

// Here we register the pointer events and remove the mouse events. Pointer will still receive mouse events.
document.getElementById('finalcanvas').addEventListener('pointerdown', d20.engine.canvas._onMouseDown);
document.getElementById('finalcanvas').addEventListener('pointerup', d20.engine.canvas._onMouseUp);
document.getElementById('finalcanvas').addEventListener('pointermove', d20.engine.canvas._onMouseMove);
document.getElementById('finalcanvas').removeEventListener('mousedown', d20.engine.canvas._onMouseDown);
document.getElementById('finalcanvas').removeEventListener('mouseup', d20.engine.canvas._onMouseUp);
document.getElementById('finalcanvas').removeEventListener('mousemove', d20.engine.canvas._onMouseMove);

Interesting.