初学者でも簡単!?Fabric.jsを使ってお絵描きWebアプリを作ってみた -

初学者でも簡単!?Fabric.jsを使ってお絵描きWebアプリを作ってみた

2022.02.11

エンジニアブログをご覧の皆さん、こんにちは！
SCI本部の沖田と申します。
今回初めてエンジニアブログを書かせていただきます。

最近Fabric.jsというライブラリに触れる機会がありました。
今回はそのFabric.jsを使った簡単なお絵描きアプリを作っていこうと思います。

Fabric.jsとは

Fabric.jsとは、HTMLのcanvas機能を拡張してくれるJavascriptのライブラリです。
canvasは、HTMLでグラフィックやアニメーションを描画するための機能で、
HTML上にフリーハンドで線を書いたり、画像を置いたり、テキストを打ったり、、といったことができるようになります。
詳しくは公式サイトをご覧ください。

実際に作ってみる

今回はお絵描きアプリに最低限必要なペン機能、消しゴム機能、画像ダウンロード機能の三つを実装します。

htmlの準備

まずはhtmlを書いていきます。
今回はcdnからfabric.jsを読み込みます。

<div>
    <input type="radio" id="draw" name="mode">
    <label for="draw">ペン</label>
    <input type="radio" id="erase" name="mode">
    <label for="draw">消しゴム</label>
</div>
<div>
    <input type="button" id="downloadPng">
</div>
<br>

<!-- お絵描きエリアの設定 -->
<canvas id="canvas" height="500" width="500" style="border-style: solid; border-color: black;"></canvas>

<!-- Fabric.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>

htmlをwebブラウザで開くと下記の画像のようになると思います。
黒い枠線の内側がお絵描きするエリアになります。

screencapture-file-C-Users-NTS00081-Desktop-index-html-2022-01-24-16_25_50

ペン機能

それではペン機能から実装していきます。
Fabric.jsではcanvas.isDrawingModeで手書き入力の切替ができます。
canvas.freeDrawingBrushでブラシの太さや色、種類も選ぶことができます。

const canvas = new fabric.Canvas("canvas");

document.getElementById("draw").addEventListener("click", function () {
    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
    canvas.freeDrawingBrush.width=5;
    canvas.freeDrawingBrush.color="black";
    canvas.isDrawingMode = true;
});

消しゴム機能

線を書けたら次は消しゴム機能、といきたいところですが、
残念ながらFabric.jsにはイラストツールによくある「マウスでなぞって消す機能」はないようです。

一般的な代替策としては

背景色と同じ色のブラシで上書きする。
canvas.remove(canvas.getActiveObject())で削除する。

の二つがあるようです。

1.は一般的なイラストツールと同じ使い心地になりますが、書いた線の移動・拡大縮小をする場合は相性が悪いです。
2.は選択しているオブジェクトを削除するので、移動・拡大縮小と相性が良いです。
今回は移動・拡大縮小はしないので、1.で実装します。

コード自体はペン機能とほとんど同じですが、canvas.backgroundColorで背景色をちゃんと設定しておかないと画像にしたときに背景が透過するので注意です。

canvas.backgroundColor="white";

document.getElementById("erase").addEventListener("click", function () {
   canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
   canvas.freeDrawingBrush.width=10;
   canvas.freeDrawingBrush.color="white";
   canvas.isDrawingMode = true;
});

画像ダウンロード機能

最後に画像ダウンロード機能です。
canvas.toDataURLで好きな画像フォーマットにしてダウンロード可能です。

document.getElementById("downloadPng").addEventListener("click", function () {
   const base64 = canvas.toDataURL({
       format: "png",
   });
   const link = document.createElement("a");
   link.href = base64;
   link.download = "イラスト.png";
   link.click();
});

完成!

早速絵を描いてみましょう！

こくり

弊社で開発したロボット「こくり」の絵を描いてみました！
うーん、我ながら上手く描けたのでは？

今回は最低限の機能だけでしたが、Fabric.jsを使えば以下のようなこともできます。

図形、文字、画像の挿入
json形式での保存と読み込み（一度描いた絵を描き直すといったことが可能になります。）
レイヤーの並び替え
アニメーション
etc…

公式サイトでは様々なデモが公開されているのでもっと知りたい方はそちらへどうぞ。

まとめ

『Fabric.js is a powerful and simple Javascript HTML5 canvas library』と謳うだけあり、非常に使いやすい上に機能も豊富でした。
ものによっては仕組みを理解するのに苦労することもありますが、Fabric.jsはすんなり理解できましたし、
原稿を書いている間も多くの機能に目移りして危うくテーマから脱線しそうにもなりました。

不満点を挙げるとすれば、日本語のナレッジが少ないことが挙げられます。
こだわった機能の実装になると苦労するかもしれません。

業務としては、教育系やイベント系のソリューションと相性が良さそうです。
手書き入力ができるので、AIと組み合わせれば文字認識の入力に使えるかもしれません。

TOPに戻る

ENGINEER BLOG