JavaScript code that works with a mouse does not work with a pen tablet.

Things I want to do

JavaScript code that works with a mouse did not work with a pen tablet.

This article summarizes the revisions made by the author.

The modified application is a drawing application that uses a canvas. This is a description of the modifications made to make the application compatible with pen tablets. (The application will be modified to work with both pen tablets and mice.)

Regarding smartphone/tablet compatibility

Smartphone/tablet compatibility should be basically the same as pen tablet compatibility, but we haven’t tested it.

Problems and Corrections

No mouse-related events are coming.

When using a pen tablet, I did not receive mousedown, mousemove, or mouseup events.

Pen tablets receive touch events, not mouse events.

Each event needs to be replaced as follows:

Here, to make the mouse and pen tablet behave similarly, I actually made the following modifications: (I made it so that the same function is called when using the mouse/pen tablet.)

Before revision:

	canvas.addEventListener('mousedown', startDrag, false);
	canvas.addEventListener('mousemove', whileDrag, false);
	canvas.addEventListener('mouseup', endDrag, false);

After correction:

	canvas.addEventListener('mousedown', startDrag, false);
	canvas.addEventListener('touchstart', startDrag, false);
	canvas.addEventListener('mousemove', whileDrag, false);
	canvas.addEventListener('touchmove', whileDrag, false);
	canvas.addEventListener('mouseup', endDrag, false);
	canvas.addEventListener('touchend', endDrag, false);

Unable to retrieve offsetX/offsetY from Event.

The above fix will allow the event to be received, but I cannot obtain event.offsetX/offsetY from the event, which is an argument to the callback.

This is because touch events and mouse events are different. Also, touch events do not have offsetX/offsetY. Therefore, you need to calculate them as follows:

`element` is the reference element. You can obtain it using `document.getElementById`, etc.

const offsetX = event.touches[0].clientX - element.getBoundingClientRect().left
const offsetY = event.touches[0].clientY - element.getBoundingClientRect().top

I created the following function so that it works with both a mouse and a pen tablet.

If `event.offsetX/Y` exists, it will be returned as is; otherwise, it will be calculated and returned.

function getOffesetX(event,id) {
	if (event.offsetX != undefined) return event.offsetX;
	return event.touches[0].clientX - document.getElementById(id).getBoundingClientRect().left
}
function getOffesetY(event,id) {
	if (event.offsetY != undefined) return event.offsetY;
	return event.touches[0].clientY - document.getElementById(id).getBoundingClientRect().top
}

Here, we’re talking about offsetX/Y, but there’s no coordinate information like clientX/Y, nor is there event.clientX. event.touches[0]It is saved below. (The reason `touches` is an array is because multiple touches may occur simultaneously on smartphones, etc.) Please refer to the following page for details.

Touch - Web API | MDN

Touch インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。

developer.mozilla.org

Scrolling while moving the pen (dragging)

When I move the pen up and down, the app works as expected, but at the same time, the browser starts scrolling.

You can prevent scrolling by stopping the browser’s initial actions while dragging using the following method.

Recommended Customization

You can stop the initial behavior by calling event.preventDefault() in the function called by the touchmove event, as shown below.

Notice

I found something concerning on the following page: `preventDefault` may not work depending on the browser.

If it’s not working as expected, the following fixes may resolve the issue.

Before revision:

canvas.addEventListener('mousemove', whileDrag, false);

After correction:

canvas.addEventListener('mousemove', whileDrag, {passive:false});

EventTarget: addEventListener() メソッド - Web API | MDN

addEventListener() は EventTarget インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。

developer.mozilla.org

canvas.addEventListener('touchmove', whileDrag, false);
function whileDrag(event) {
	event.preventDefault()

Result

The target application now works with pen tablets after correcting the above issues.