TouchStart Chrome Canvas с ручкой не работает должным образом

Question

Я пытаюсь создать объект canvas, который можно использовать как mspaint для рисования. Я хочу иметь возможность использовать мышь, а также ручку (в моем случае поверхностное перо на поверхности4).

Рисовать мышкой можно во всех 4 браузерах. Проблема в ручке: она работает правильно с IE11, Egde, Firefox, но есть один браузер, который сопротивляется, и это Chrome...

На самом деле, в Chrome(v63) перо может рисовать, но только если перо не касается экрана, но очень близко к нему. Как только я касаюсь экрана пером, он больше не рисует...

Так я что-то упустил? Почему у меня такая разница и у кого правильная реализация? Как я могу исправить это кросс-браузер? Обратите внимание, что я также пытался с PointerEvent ( https://developer.mozilla.org/en-US/docs/Web/Events/pointerdown), но он тоже не работал....

Код

Посмотрите и попробуйте код здесь: https://codepen.io/miam84/pen/aNMryw

И здесь небольшая часть кода, используемая слушателями:

canvas.addEventListener('touchstart', on_mousedown, false);
canvas.addEventListener('mousedown', on_mousedown, false);

function remove_event_listeners() {
      canvas.removeEventListener('mousemove', on_mousemove, false);
      canvas.removeEventListener('mouseup', on_mouseup, false);
      canvas.removeEventListener('touchmove', on_mousemove, false);
      canvas.removeEventListener('touchend', on_mouseup, false);
      document.body.removeEventListener('mouseup', on_mouseup, false);
      document.body.removeEventListener('touchend', on_mouseup, false);
};

//Event when the mouse is clicked
function on_mousedown(e) {
      if (!canvas.isLocked) {
        e.preventDefault();
        e.stopPropagation();

        canvas.hasDrawn = false;
        //we activate the mouse and touch events
        canvas.addEventListener('mouseup', on_mouseup, false);
        canvas.addEventListener('mousemove', on_mousemove, false);
        canvas.addEventListener('touchend', on_mouseup, false);
        canvas.addEventListener('touchmove', on_mousemove, false);
        document.body.addEventListener('mouseup', on_mouseup, false);
        document.body.addEventListener('touchend', on_mouseup, false);

        var xy = canvas.getCursorCoords(e);
        canvas.ctx.beginPath();
        canvas.pixels.push('moveStart');
        canvas.ctx.moveTo(xy.x, xy.y);
        canvas.pixels.push(xy.x, xy.y);
        canvas.xyLast = xy;
      }
};

Answer 1

Проблема была решена с помощью API-интерфейса PointerEvent и была связана с тем, как мы получаем позицию указателя со смещением (если холст имеет поле,...).

Вот как это работает:

  canvas.removeEventListener('pointerup', on_mouseup, false);
  canvas.removeEventListener('pointermove', on_mousemove, false);
  document.body.removeEventListener('pointerup', on_mouseup, false);

function getMouseOffset (_e, _el) {  
  let xpos, ypos;
  if (typeof _e.offsetX === 'undefined') { // ff hack
    // dans ce cas, jQuery facilite l'appel d'offset
    xpos = _e.pageX - $(_el).offset().left; 
    ypos = _e.pageY - $(_el).offset().top;
  } else {
    xpos = _e.offsetX;
    ypos = _e.offsetY;
  }
  return { x: xpos, y: ypos };
}