fabric.jsでお絵かきしよう

ブラウザ上でお絵かきしたい！

そんな時に便利な**「fabric.js」**というライブラリのご紹介。

PCでもスマートフォンでも利用できます。

導入

導入方法はとても簡単。

GitHubからダウンロードするか

github.com/fabricjs/fabric.js https://github.com/fabricjs/fabric.js/releases

あるいはCDNなら↓を読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>

そんでもって、以下のように書き加える。

<script>
    var canvas = new fabric.Canvas("canvas");
    canvas.isDrawingMode = true;  // お絵かきモードの有効化
    canvas.freeDrawingBrush.color = "#000000"; // 描画する線の色
    canvas.freeDrawingBrush.width = 5;  // 描画する線の太さ
</script>

サンプル

キャンバス