Wacom in a browser cancels movement

Question

I am currently trying to use my wacom intous to paint something on a canvas in my browser.

The code is pretty basic and does nothing other than finding the position of my mouse and drawing a path when the mouse is clicked.

This works as expected when I use my mouse. When I use my wacom tablet, the move will be canceled after ~20px and the lostpointercapture event as well as the pointercancel event will be fired.

This is the code:

(function() {


var canvas = document.querySelector('.canvas');
  var ctx = canvas.getContext('2d');

  var currentPosition = { 
    x: 0, 
    y: 0 
  };

  function init() {
    adjustCanvasSize();
  }

  function adjustCanvasSize() {
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
  }

  function setPosition(ev) {
    currentPosition.x = ev.clientX;
    currentPosition.y = ev.clientY;
  }

  function draw(ev) {
    ev.preventDefault();
    if (ev.buttons !== 1) {
      return;
    }
    ctx.beginPath(); 
    ctx.lineWidth = 1; 
    ctx.lineCap = 'round'; 
    ctx.strokeStyle = '#1a1b1c'; 
    ctx.moveTo(currentPosition.x, currentPosition.y); 
    setPosition(ev);
    ctx.lineTo(currentPosition.x, currentPosition.y);
    ctx.stroke(); 
  }

  document.addEventListener('pointermove', draw);
  document.addEventListener('pointerdown', setPosition);
  document.addEventListener('pointerenter', setPosition);

  init();
})();

Does anyone have an idea why the wacom stops drawing after a few pixel?

does it work well in any desktop application(e.g. MS Paint or similar)? — skyboyer, Jun 10 '18 at 12:45
Please do post the [mcve] directly in the question instead of as an external link. If the code is too big, you can only post the relevant parts and leave the link for further reference. — Kyll, Jun 10 '18 at 12:46
have you tried different browsers? also try passive event listeners since it [has worked](https://github.com/RubaXa/Sortable/issues/1199) for one drag-n-drop handling library with similar case — skyboyer, Jun 10 '18 at 13:24
@skyboyer I've tried a few "online paints" and all work well with my wacom tablet. I think I have to do more research...feels like the tablet tries to scroll — Pablo Christiano, Jun 10 '18 at 13:32

score 2 · Accepted Answer · answered May 25 '19 at 04:47

I've run into this exact issue, with the "lostpointercapture" PointerEvent after a few pixels traversed

https://jsfiddle.net/mr1z7qg3/

The solution is to add the

touch-action: none;

style to the location getting drawn on, otherwise the browser will interpret it as a pan/zoom touch gesture https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

...On Chrome

Firefox requires dom.w3c_pointer_events.dispatch_by_pointer_messages in about:config instead

Wacom in a browser cancels movement

1 Answers1

Linked