canvasのお絵描きツールにからピッカー機能をつけてみる

canvasのお絵描きツールを作っていくと、カラーピッカー機能をつけたいと思うようになったので実装してみることに。

最初は、jQuery UIのスライダーを使って実装しようと思ったのですが、探してみるともっとよさそうなJSColorというJavaScriptライブラリがあったのでそれを使って実装してみることに(参考：カラーピッカーをお手軽に設置できるJSライブラリ「JSColor」 | Web活メモ帳)。

HTMLに『<input class=”color” value=”000000″>』と記述し、JavaScript側には下記のようなコードを追加。

$('.color').on('keyup input change', function(){
    ctx.strokeStyle = "#" + $(this).val();
});

これで、カラーピッカーで色を選択するとCanvasのペンの色にも反映される。自分自身でカラーコードを入力しても反映されるのがいいですね。

ただ、基本的な色は今までどおり選択できるようにしたいところ。てっきり、テキストボックスにカラーコードを入れた後に、jQueryのtriggerでinputイベントを呼び出すようにすればできると思ったものの、それではできませんでした。
調べてみると、JSColorにはfromStringというメソッドがあるようで、その引数に色コードをいれることによって変更できた。

$('#penColor').change(function(){
    $('.color')[0].color.fromString($(this).val());
    $('.color').trigger('change');
});

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

ついでに、ペンの太さも変えられるようにし、その大きさも分かるようにしました。最初、divタグの大きさを変えて背景をペンの色と同じようにして対応しようと思ったものの、なんだかペンのほうが太く見えるので、新しいcanvasを追加して対応しました。
と思ったけど、どうもペンで書いた線の周りが少しぼやけているように見える。なんとかならないものだろうか・・・。