JavaScriptでお絵描きソフトを作りたい！

ChatGPTさんに聞きながらJavaScriptでお絵描きソフトを作り始めたよ～！
あーヤバい！家でもプログラミングするなんて、私オタクみたいじゃん！

JavaScriptのAPIに可能性を感じる…

でもね、JavaScriptのペン入力関係のAPIにちょっと可能性を感じたのですよ。

Pointer Events Level 3

JavaScriptでも、ペンタブレットの筆圧やペン傾きを検知するAPIは普通に使用可能になっております（Pointer Events Level 3）。Chrome、Edge、Firefox、Safariで対応しているようなので、主要なブラウザなら大丈夫ってことですね。

Ink API

また、低遅延レンダリングのためのAPIも用意されています。ペンタブで線を描く際に、ペンの動きに描線が遅れてついてくる感じになると、描きにくいんですよね。その遅延を少なくするために「Ink API」が用意されています。遅延を少なくするため、OSがアプリより先回りして仮の描線を表示してくれる感じのようです。2025年3月リリースのChrome134で対応したようなので、まだ結構最近対応したばっかりのAPIですね。

ネイティブアプリのお絵描きソフト並みを狙える？

「Pointer Events Level 3」と「Ink API」を組み合わせれば、JavaScriptで組まれたブラウザ上で動くアプリでも、ネイティブアプリ並みに低遅延でスムーズに描けるお絵描きアプリにできる可能性はありますよね！

ネイティブアプリのお絵描きソフト並みにするのは大変だ…

とりあえず「Pointer Events Level 3」と「Ink API」を使って、線を描画するだけのアプリを作ってみました。また、ポーリング周波数が240Hzぐらいで高頻度にペンを動かしたイベントを取得できるpointerrawupdateイベントを使って、カクカクにならないようにしてみました。

確かに、描いてみるとスムーズにペン先に描線が付いてくる感覚があります！遅延の小ささはiPad+Apple Pencil並みかもしれません。（iPad＋Apple Pencilは、かなり描きやすい）

しかし、見ての通り、描線がガタガタしています。「抜き」の部分が階段状になっていますね。今はサンプリングされたポイントとポイントの間を、ベジェ曲線で結んで描画しています。しかし、それだとポイントとポイントの間の線の太さは一定になってしまいます。筆圧も線形補間か、ベジェで補間して、線の太さを変化させる必要がありそう。あと、筆圧に応じて透明度も変化させないとダメそう。

そうなると、JavaScriptのCanvasで用意されている普通の線を描画するような関数だとダメで、ちゃんとやるならポリゴンに分解して線を描画するような処理を組まないとダメですね。なかなか大変。（もしくは●を細かく連続して補間しながら描画でもいいかもしれない）

以下のキャプチャは、市販のお絵描きソフト（クリスタ）で描いた線です。やっぱり、圧倒的に入り抜きがキレイですね。これぐらい描けるようにしたい。

余談

皆さんから生暖かいコメントをたくさんいただいた記事が、先月もっとも多く読まれた記事の１つになりました！ありがとうございます！（ツッコミどころが多い記事ですまんかった）