fabric.jsのfree drawingの基本機能まとめ

とりあえず最低限のお絵かき機能を確認

ブラウザ上でシンプルなお絵かきアプリ作りたくてfabric.jsライブラリについて調べました。

fabric.js

とりあえず、初期化、サイズ指定、手書き開始、ペンサイズと色の設定、全クリアの方法が分かりました。

全消去以外の機能をCodePenで動かしてみました。たったこれだけでちゃんとお絵かきできるのはすごいですね。

See the Pen
fabric.js free drawing 1 by Ryoji Kimura (@ryjkmr)
on CodePen.

あとはUIから色やペンサイズを変えられるようにするだけです。

各機能を個別にメモ

既存のcanvasにfabric.jsを適用する

fabric.jsを使うには、まず最初に既存のcanvas要素を割り当てます。

 javascript
//あらかじめhtml内に id="canvas_in_html" のcanvas要素を用意しておく
const canvas = new fabric.Canvas("canvas_in_html");

canvasのサイズを設定する

 javascript
canvas.setWidth(300);
canvas.setHeight(200);

後から変更できるっぽいです。

canvasの背景色を指定する

 javascript
canvas.setBackgroundColor(
"rgba(255, 255, 200, 1)",
canvas.renderAll.bind(canvas)
);

rgba()は不透明度付きの指定。1で不透明。0が透明。

free drawing（お絵かき）を有効にする

 javascript
canvas.isDrawingMode = true;

初期化してこれをやるだけでいきなりお絵かきができるのは凄いです。

free drawingのペンサイズを設定する

 javascript
canvas.freeDrawingBrush.width = 10;

free drawingのペンカラーを設定する

 javascript
canvas.freeDrawingBrush.color = "rgba(255,50,40,0.5)";

不透明度を0.5にしているので半透明の描画になります。

canvasの内容を全クリアする

 javascript
canvas.clear();

設定したバックグラウンドも消えてしまうので、
再度canvas.setBackgroundColorする必要があります。

研究の成果↓

canvasにborderを付けたときの話↓