Webアプリ上で特殊なUIを実現したい

趣味でプログラミングをしている高校生です。初めてteratailを利用させていただきます。

テーマ、知りたいこと

HTML,JavaScript,CSSでフロントエンドが構成され、PC・スマホ両方で使えるようなWebアプリの制作を考えています。そのアプリの主要画面を以下のようなUIにしたいです。

• 図形の円を、画面の座標平面上に複数描画する
• その座標平面をスクロールやピンチインアウトでぬるぬる動かして見渡せる
• 画面上の円をタップ・ダブルタップしたりドラッグアンドドロップすることで円のサイズや座標平面上の位置を変更したり、その円に関連付けられたオブジェクトの情報を変更したりできる

イメージとしては、Obsidianというノートアプリ(?)のグラフビューや下のGIF画像が近いです(それぞれの円同士を連結させる必要はない)。

背景、状況

今のところ、私の知識内だとVueやReact等のフレームワークで対応できる気がせず、素のHTML,JavaScript で書いています。標準のHTML要素の組み合わせでは実現できなさそうなので、HTML5のCanvasを描画エンジン的に使って、JavascriptでtouchEventやmouseEventを捌きながら、requestAnimationFrameで処理することを考えていました。
しかし以下のような問題点があります。

• touchEventやmouseEventを捌くのが大変。具体的には↓

• シングルタップorダブルタップ、スクロールorピンチインアウトの判別

• どの円(オブジェクト)をタップしたかはtouchEventの座標で判断するしかない(「このオブジェクトがタップされた時にこの関数を実行する」みたいなイベント駆動(であってますかね?)にしたい)

• ブラウザの画面サイズを取得してそのサイズのCanvas要素をJavaScript で生成してるのですが、スマホ(試したのはiPhone SE 2)でCanvas上に文字を描画すると荒く見える。

• requestAnimationFrameで毎フレーム処理するのは重くならないか

等

このまま現状の方法で突き進んでいいのか自信が持てないでいます。
もしこのような用途に使えそうなライブラリがあり、ご存知の方がいたら教えていただきたいです。そのようなライブラリが無いようであれば、今私が取ろうとしている実装方法の改善点をご教授いただきたいです。
例えば、、、

• CanvasではなくWebGL(あまりよく分かっていません)を使った方がいいよ
• そもそもこういうUIはWebアプリに適してない、〇〇というライブラリを使ってネイティブアプリで作ると良い
• touchEvent,mouseEventはこう捌くと楽だよ

いつもは調べて解決できることが多いのですが、今回は何と検索したら良いかさえ分からなかったので初めてTeratailで質問させていただきます。見当違いなことを書いていたり伝わりづらかったりと至らない点が多いと思いますが、ご回答いただけると幸いです。