ペイント解説の画像を追加、目次を追加

Author: ics-ikeda

docs/index.md

@@ -111,6 +111,7 @@ webのリッチコンテンツを作るためのフレームワーク「CreateJS
 - [フラクタル図形](fractal.md)
 - [パーティクルシステム](particle.md)
 - [シューティングゲーム](game_shooting.md)
+- [お絵描きツール](paint.md)
 
 ## Adobe Animate CCを使おう
 

docs/paint.md

@@ -1,7 +1,7 @@
-# CreateJS でお絵描きアプリを作ろう
+# CreateJS でお絵描きツールを作ろう
 
 
-HTML5の`canvas`タグを使ってお絵描きアプリケーションを作ってみましょう。今回のサンプルは3段階で解説します。簡単な線を描くサンプル、お絵かきのための基本機能を説明したサンプル、そして本格的なお絵かき機能のサンプルです。
+HTML5の`canvas`タグを使ってお絵描きツールを作ってみましょう。今回のサンプルは3段階で解説します。簡単な線を描くサンプル、お絵かきのための基本機能を説明したサンプル、そして本格的なお絵かき機能のサンプルです。
 
 ## ステップ1：JavaScriptで直線を描画する
 
@@ -57,7 +57,7 @@ shape.graphics
 
 マウスのドラッグ＆ドロップを制御してお絵かきの基本機能を作っていきましょう。
 
-![](../imgs/paint_step2.png)
+![](../imgs/paint_step2_custom.png)
 
 - [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/paint_step2.html)
 - [サンプルのソースコードを確認する](../samples/paint_step2.html)
@@ -144,9 +144,9 @@ function handleUp(event) {
 ```
 
 
-## ステップ3：お絵かきコンテンツの作成
+## ステップ3：お絵かきツールのユーザーインターフェース
 
-色や太さの変更ができるようにお絵かきコンテンツの機能を充実させてみよう。HTML側に配置したパーツとの連携します。
+色や太さの変更ができるようにお絵かきツールの機能を充実させてみましょう。HTML側に配置したパーツとの連携します。
 
 ![](../imgs/paint_step3_custom.png)
 
@@ -166,7 +166,7 @@ function handleUp(event) {
 </div>
 ```
 
-`input`タグで`type="color"`の種類を指定すると、カラーパレットを使えます。
+`input`タグで`type="color"`の種類を指定すると、カラーパレットを使えます。OSやブラウザの種類によって、カラーパレットのデザインが異なります。
 
 ### 色の値の取得