イラストレイターのようなものを作りたい

Question

イラストレイターのようにマウスで範囲を指定して、色を変えるなどをしたいと思っています。
非同期でいくつか方法が浮かんでいるのですが、どちらがいいか迷っています。
アドバイスをいただけると幸いです。

私が考えたのは

マウスを押したとき(onMouseDown)マウスの座標を取得 = hoge1
　　　　　↓
マウスを離したとき(onMouseUp)の座標取得 = hoge2
　　　　　↓
hoge1とhoge2の差分を出す = hoge3
　　　　　↓
hoge3のbackgroundcolor変更

もしくは

onMouseMoveにて最初と最後の座標取得
　　　　　↓
backgroundcolor変更

このように考えています。

質問
・このどちらかの考えで行けるのか
・いけるならどちらが良いか
・またほかにいい方法があるなら教えていただきたいです

よろしくお願いします。

Comments

[Zuishin]

後者では無理だと思います。RxJs の使用をおすすめします。

[m.ts10806]

まずやってみるところからでは

[退会済みユーザー]

Zuishinさんありがとうございます。
調べてみます。

[退会済みユーザー]

m.ts10806さんのおっしゃる通りです。
一応前に試して、できなかったので質問させていただきました。
その時のコード消してしまったので今回は載せてないですが...

Answer 1

cavasでいろいろできそうなので、Rxjsなども勉強しながらやってみたいと思います。
ありがとうございました。
一応参考にしたサイト載せておきます。
https://www.otwo.jp/blog/canvas-drawing/