js、HTML5(canvas)での簡単と思われるアプリケーション開発

＜募集例＞
※ 修正してご利用ください。不要な部分や本メッセージは削除してからご送信ください。

【概要】
HTML5 canvasタグを使用し、jsでの丸い円を描くアプリケーションを作成しております。
写真は課題１までできている内容です。

【目的】
アプリケーションの完成を目指してますが、
課題２以降の作成方法が全く分からない状況で、作成方法を学ばさせて頂ければと思ってます。

【募集背景】
アルバイトの募集を受けたのですが、私がruby（rails）しか言語として学べていなく、
jsのタグやら作成のロジックの経験が全くないため、ご教示頂きたいです。

【コミュニケーション方法】
ビデオ通話のみ or チャットとビデオ通話の両方希望


【作成の為の課題】

HTML5 CanvasとJavascriptを使用して以下の機能を実装する。

※ブラウザにはChromeもしくはFireFoxを使用する。
※jQuery等Javascriptフレームワークを使用してもよい。
※サーバとの通信は使用しない。

課題１：以下の機能を有するWeb画面を作成せよ。
１． 幅600px、高さ400pxのCanvasを画面上に表示させる。

Canvas内をクリックした際、クリックした点を中心に半径30pxの円を描画する。
円は外枠を赤2pxで表示し、内部をピンクで塗りつぶす。
4． クリックする度に新たな円が作成され、過去に作成した円は画面を更新しない限り残るものとする。
課題２：課題１のWeb画面に以下の機能を追加せよ。

Canvasの上部に「作成」「選択」のラジオボタンを配置し、「作成」を初期選択状態にする。
「作成」が選択されている場合は、Canvasをクリックした際に課題１と同じ動作をする
「選択」が選択されている場合は、Canvas上の円をクリックした際、クリックされた円をドラッグ移動可能にする。
複数の円が重なったポイントをクリックした場合は、最上部に配置した円をドラッグするものとする。
円上でクリックされたポイントはドラッグ中もその円上の位置を維持するものとする。
課題３：課題２のWeb画面に以下の機能を追加せよ。

「選択」が選択されている状態で、円をクリックすると選択された円に選択状態を表す矩形が表示される。
矩形は円を囲む正方形で2pxの水色とする。
円の複数選択は出来ない。異なる円を選択したら以前の選択はクリアされる。
Canvas内で円以外の箇所をクリックした場合、円の選択はクリアされる。
Canvas上部に「削除」ボタンを作成し、円が選択された状態で「削除」をクリックすると選択された円は削除される。
課題４：課題３のWeb画面に以下の機能を追加せよ。

「元に戻す(Undo)」「やり直し(Redo)」ボタンを追加し、各々その操作が不可能なときは不活性とする。
Undo/Redoは無制限に行う事ができる。
Undo/Redoの対象は円の追加、削除、移動の前後のみとする。ドラッグ中の円の動きを再現する必要は無い。


【期限】
明日6/14に作成完了を考えております。　猶予ない状況での応募になってしまいますが、
お付き合い頂ける方がいらっしゃればお力をお借りさせて下さい。