HTML5のCanvas機能を使用してマウスの座標から線を引くというアニメーションを作りました。

右側の結果の場所にマウスをホバーしてみてください。

See the Pen NrxYEp by Atushi (@Yoshikawa) on CodePen.

アニメーションの処理速度の問題からCreateJSを使用して同じ処理をする

上記の方法では処理落ちが発生してしまいアニメーションの速度が一定ではなかったのでCreateJSを使用し、同じアニメーションを実行することにしました。

マウスに追従する線が引けない問題

CreateJSでマウスに追従する線を引くのに苦労しました。 最初の方法では毎フレームカンバスをクリアしていたので問題なかったのですが、CreateJSではオブジェクトをremoveChildしてもインスタンスが残るので新たに生成する必要がありました。
毎フレーム新たなインスタンスを作成してることになりますが、問題ないのでしょうか？
でもCreateJSでは4.0でメモリの扱いが変更したらしいのでガーベジコレクションに期待したいと思います。

CreateJSで同じアニメーションを実装

結果、なんとか同じ処理をすることができました。

今回は簡単な実装ですが今後画像のアニメーションなども追加して装飾をしていきたいです。