HTML5 Canvasで作った「シンプルペイント」。色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5 CanvasとJavaScriptを使って、Webブラウザー上で動くお絵かきツール「シンプルペイント」を制作する企画。前回の記事では、コアとなる描画機能を作成し、PNGファイルへ保存する方法を解説しました。今回は、このシンプルペイントをベースに、ブラシの色やサイズ(太さ)を変更できるように拡張しましょう。 ブラシの色選択機能を付けるには 前回作成したシンプルペイントは単色(赤色)の描画しかできませんでした。このままだとお絵かきツールとしては不十分なので、ブラシの描画色を選択できるようにしましょう。今回は8色(黒、青、赤、紫、緑、水色、黄、白)のカラーパレットを用意し、マウスで選択した色
![HTML5とjQueryでブラウザーがペイントツールに! (1/3)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f30b344abccf83ea52ab16016534f183e874f56/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F08%2F25%2F243922%2Fl%2F545b6842b4bdc2be.jpg)