We have a feature in our app to allow user to draw their signature to an html5 canvas. It has worked for many years without any changes with either a mouse or touch finger. It still works in IE 11 and iPad Safari.
Touch finger does not work on the touch screen for Microsoft Edge or Chrome browser. The canvas only registers single dots, but not continuous strokes. Mouse still works however.
Here are the events being used. I will try to post more code if needed, but much of it is proprietary. I'll try to extract more of it, and post if I can.
this.ctx = this.canvas.getContext("2d");
this.canvas.onmousedown = dojo.hitch(this, this._onMouseDown);
this.canvas.ontouchmove = dojo.hitch(this, this._onTouchMove);
this.canvas.ontouchend = dojo.hitch(this, this._onTouchEnd);
this.canvas.ontouchstart = dojo.hitch(this, this._onTouchStart);
_onTouchMove: function (event, mouse) {
if (!this.isDrawing) { return; }
var coors = this._getEventCoors(event, !mouse);
this._continueDrawing(coors);
return false;
}
_getEventCoors: function (e, touch) {
if (touch) {
e = e.changedTouches[0];
}
var canvasPos = this.canvas.getBoundingClientRect();
return { x: e.clientX - canvasPos.left, y: e.clientY - canvasPos.top };
}
_continueDrawing: function (coors) {
var maxCoordMovement = 50;
if (!this.canDraw) { return; }
if (this.isDrawing) {
// occasionally we get coordinates that are far away from the actual touch
// throwing out coordinates that are far from the last set
// NOTE: This can happen when the pointer leaves the canvas and then returns (interrupts flow of signature)
if ((Math.abs(coors.x - this._lastPoint.x) > maxCoordMovement) ||
(Math.abs(coors.y - this._lastPoint.y) > maxCoordMovement)) {
console.warn("_continueDrawing is discarding coordinates: x-" + coors.x + " y-" + coors.y
+ "as they are too far from x-" + this._lastPoint.x + " y-" + this._lastPoint.y);
return;
}
this.ctx.moveTo(this._lastPoint.x, this._lastPoint.y);
this._lastPoint = coors;
this.ctx.lineTo(coors.x, coors.y);
this.ctx.stroke();
}
}