Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。 そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドローライブラリとなっています。これならば既存のサイトと組み合わせた使い方ができるようになります。

Drawingboard.jsの使い方

使い方は簡単で、CanvasのIDを渡すだけです。

こんな感じでカスタマイズもできます。

線種を変えたり、画像でダウンロードする機能もあります。

Drawingboard.jsは自分たちのサイトに埋め込んだり、既存の機能と合わせて使えるようになっているのが利点です。手書き画像をサーバに送れる機能を実装するのも良いでしょう。カスタマイズが容易なのも良いですね。

Drawingboard.jsはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website. Leimi/drawingboard.js: A canvas based drawing app that you can integrate easily on your website.