HTML Canvasでお絵描きアプリを作ってみた

 こんにちは、デベロップメントテクノロジーセンターの岩崎です。

少し前にHTML Canvasを使ったお絵描きアプリを作ることがあったため、備忘録もかねてサンプルアプリを作ってみました。

サンプルアプリ

早速ですが、今回作ったサンプルアプリは下記です。
画像ファイルをアップロードして、その画像に対してお絵描きが出来るようになっています。


CodePenでのソース確認、動作確認はこちら

今回は、上記サンプルアプリからいくつか要点をピックアップして説明していきます。
細かい説明も知りたい場合はソース・コメントを直線ご確認ください。

Canvasを使った描画機能の実装方法

HTML Canvas APIであるCanvasRenderingContext2Dを利用します。
(APIドキュメントはこちら

描き込みモード(ペン、直線、短径、円)、消しゴムモードそれぞれで処理を用意し、マウスイベントをトリガーにして各処理を呼び出しています。マウス移動イベントは連続して発生するため、各処理もそのたびに連続して呼び出す形となります。

複数Canvasを重ねる

サンプルアプリでは下記4つのcanvasを重ねて表示しています。それぞれの役割を説明していきます。

①描画Canvas
②画像Canvas
③ポインタCanvas
④一時的描画Canvas

 

①描画Canvas

画面操作により色を描き込んでいくCanvasです。
上記で紹介した描き込みモード等もこのCanvasに対して描き込んでいきます。

②画像Canvas

アップロード画像を表示するCanvasです。
一つのCanvasで「画像表示&色の描き込み」を一緒に行うこともできるのですが、「アップロード画像を表示→色の描き込み→消しゴムで消す」という処理を行うと、消しゴム処理時にアップロード画像も一緒に消すことになってしまうため、別のCanvasを用意しました。
また、サンプルアプリはレスポンシブ対応も行っており、画像設定時にCanvasウインドウサイズと画像サイズのスケールを計算してアップロード画像サイズを調整しています。そのとき、重ねているすべてのCanvasに対して同じスケールを適用するようにしています。

③ポインタCanvas

マウスポインタを描画するCanvasです。
ポインタを表示することで、ペンサイズの範囲はどれぐらいかすぐにわかるようにしています。
描画Canvasとは別のCanvasを用意して、マウスカーソルに合わせてCanvas上で円を描画し続ける(事前の描画は次の描画時にすぐに消す)ことでマウスポインタを表現しています。

④一時的描画Canvas

直線・短径・円を書き込むときは、クリックホールド中にカーソルを動かしながら描画位置を調整し、ホールド解除したときに描画を確定させています。


この描画位置の調整時にも色を描画させたいために一時的描画Canvasを用意しています。
一時的描画は基本的には通常描画と同じ処理であり、ホールド中か否かで描画先を「描画Canvas」or「一時的描画Canvas」どちらにするかを切り替えています。

拡大縮小・画像移動

ホイールによる画像の拡大縮小、クリックホールドによる画像移動の機能も組み込んでいます。この機能はCSSのtransformプロパティを使って実現しています。

拡大縮小のサンプルは下記です。transformの起点(transform-origin)を設定してから拡大縮小を行います。アップロード画像設定処理と同じく、すべてのCanvasに対して同じCSSの設定を行います。

 

画像移動のサンプルは下記です。画像移動は拡大後のみ実行可能であり、拡大時に設定した起点を変更することで画像移動を表現しています。

 

いかがでしたでしょうか。
私はあまりフロントエンドは得意ではないのですが、今回のようなすぐ目に見えるアプリを作るのは楽しいですね。
今後も機会があればまた試していきたいと思います。

  • このエントリーをはてなブックマークに追加