マウスイベントと高度な描画を学ぶ実践プラン
Canvasを配置し、mousedown、mousemove、mouseup というマウスイベントリスナーを設定します。
「描画中かどうか」を判定するフラグを用意。起点を記憶し、マウスを動かすたびに lineTo と stroke メソッドで線を引きます。
選んだ値で色や太さを動的に変更可能に。さらに、クリアボタンの実装や、Canvasの内容をPNG画像としてダウンロードする機能を追加します。
「マウスの軌跡に合わせて線を引く」というコア機能が完成しなければ、色や太さのテストができないため、依存関係の強い機能から順番に作成することが不可欠です。