昔は、
１．マウスの軌道に点をプロット
２．その点と点を繋ぐ線を描画する
という非常に面倒くさい方法をとっていた。
なんでこんなことをしたかというと、高校の授業でこの方法を思いついてからずっと信じてきた方法だから・・
固定観念ってだめね。
html5のcanvasでは、lineJoinとlineCapというcontextのプロパティをいじることによって簡単に実現することができます。
context = canvas.getContext('2d');
context.lineCap = 'round';
context.lineJoin = 'round';
上の設定を行ったら、後はmousedown mousemove mouseendに合わせて線を引いていくだけ！
ね、簡単でしょ？
lineCapにroundを設定すると始点と終点を丸めてくれて、
lineJoinにroundを設定すると線と線の繋ぎを丸めてくれる。
昔書いた記事を信じてわざわざ面倒な方法を使っている人がいたらごめんなさい。
これが恐らく正しい方法です。
ざっくり説明しすぎたので、この方法で作ったソースを以下に載せておきます。
ソース読める人はどうぞ。
https://github.com/ttakuru88/jquery-drawable/blob/master/jquery.drawable.js
