これはWebブラウザ上で動くお絵かきソフトの作成過程でぶつかった問題です。
回避策が無いかと試行錯誤を繰り返して頭がこんがらがってきたので、整理と共有の為に書きました。
私はブラウザアプリ開発についてはど素人なので、根本的な勘違いをしているかもしれません。
識者の方がいましたらご指摘お願いします。
一般的なペンタブレットの座標精度
デジタルお絵描きには欠かせない、ペンタブレットや液晶タブレットというものがあります。
タブレットの座標検知はとても精密で、一般的には画面上の1ピクセルの10分の1以下という細かい精度で座標を知ることができます。
コンピュータで絵を描く上では、この座標精度がとても重要です。
アップルペンシルの座標精度
ネイティブアプリに関しては、高精度な座標検知APIがあるようです。
https://qiita.com/usagimaru/items/69b3acfa251f7d191334
Safari上でのアップルペンシルの座標精度
ここが本題。
少なくとも標準的なWebサイトの作り方では、アップルペンシルの座標精度が十分には発揮されませんでした。
画面解像度が1536x2048pixelのiPadで試したところ、座標精度は768x1024程度のようです。
Webブラウザ上でのアップルペンシルの座標検知精度は、CSSピクセル単位に丸められているのではないかというのが私の推測です。
(2019/10/24: iPadOS 13.1.3で実験しました)
精度低下を回避するために試みた事
Viewportの設定を書き換える
<meta name="viewport" content="width=device-width, initial-scale=0.5">
htmlに上記の設定を書いてみると、画面の物理ピクセル単位の座標検知が行えるようになりました。
しかしこれだと全ての画面上の表示要素が2分の1サイズになってしまいます。
スライダー等コントロール要素を含めて元の大きさで表示するために、
.style.transform = 'scale(2,2)';
このような記述を追加し、2倍に拡大することで対処しました。
(拡大することで、UIの表示は荒くなってしまいます)