canvasにペンツール機能を実装したい

Question

実現したいこと

canvasに描画した画像にマウスカーソルをのせると、ペンツールの機能を持ったカーソルに変化する機能を実装したいです。
ペンツールとは、下記ページの左端にあるツールパレットの下から7番目のペンマークのツールです。
Photopea

上記ページのペンツールは、
・3点目を打つと起点、2点目、3点目を直線で結んだ範囲に色が付く
・4点目に起点を打つとパスが閉じ、図として完結され次に打つ点は起点になる。
・起点を打たない限り4点目、5点目、、、と図として完結されないまま点が増えていく
以上の機能かと思いますが、私が実装したい機能は、
・3点目を打つと起点、2点目、3点目を直線で結んだ範囲に色が付く
・4点目に起点を打つとパスが閉じ、図として完結されペンツールが機能しなくなり、通常のマウスカーソルになる
・起点を打たない限り4点目、5点目、、、と図として完結されないまま点が増えていく
・ペンツールが機能していない状態でリセットボタンを押すと、打った点がクリアになり、ペンツール機能が復活する

調べたこと・試したこと

フリーハンドのブラシツール実装方法に関するページはネット上でたくさん確認できましたが、ペンツール実装方法に関するページが見つけれらず、初心者の私には実装方法が皆目分からず、な状況です。

下記は作りかけのサンプルです。
サンプル

Answer 1

パスで図形を作成するのに、非常に役立つ優秀なライブラリをご紹介致します。
http://paperjs.org/

マウスやキーボード操作などもすべてイベントとして拾えますので、
ご希望の動作はすべて実現可能です。

Comments

[whoiwhoi]

ご紹介いただきありがとうございます。
勉強します。