Fabric.jsのダウンロードや導入と基本的な使用方法

公開：2020-01-07

更新：2020-01-13

HTML5 canvasで図形変更などを便利にするJavaScriptライブラリのFabric.jsの導入方法、ダウンロード元や注意点、基本的な使用方法です。ソースコードはコピペ可能でテンプレートとしても使えます。

ダウンロード

先ずライブラリ本体をダウンロードします。

Fabric.jsの公式サイトの、ホームページ一番下の「Download version ～」をクリックします。ダウンロードが開始されない場合は右クリックし、メニューの「名前を付けてリンク先を保存」を選びます。

"fabric.min.js"というファイルがダウンロードされるので、任意のフォルダに置きます。

ソースコード例

赤い四角と青い円を描画する例です。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>Fabric.jsのサンプル</title>
<style>#cvs {border: 1px solid gray;}</style>
</head>

<body>
<h1>Fabric.jsのサンプル</h1>
<canvas id="cvs" width="300" height="240"></canvas>

<script src="fabric.min.js"></script>
<script>
window.onload = function(){
  var canvas = new fabric.Canvas('cvs');

  //四角
  canvas.add(new fabric.Rect({
    left: 80, top: 80, width: 120, height: 80, fill: 'orangered'
  }));

  //円
  canvas.add(new fabric.Circle({
    left: 150, top: 100, radius: 40, fill: 'royalblue'
  }));
}
</script>
</body>

</html>

行と説明

12: canvasタグにidを付け、後述のscriptと合わせます。
14: "fabric.min.js"をHTMLと同じフォルダに置いた例ですが、別フォルダにする場合は変更してください。
17: canvasタグに付けたid（cvs）を指定します。

id名を"cvs"、オブジェクト名を"canvas"としましたが任意に決めてけっこうです。

14～29行はheadタグ内でもいいですし、別途スクリプトだけで外部ファイルとしてもいいです。

ここまででお気づきの方も多いでしょうが、jQueryなど多くのJavaScriptライブラリと同様の手順で手軽に導入できることも利点です。

コードはコピペですぐ使えます。エンコードはUTF-8で保存してください。

基本的な使用方法

例えば同じ四角形を配置するにも2通りの書き方があります。

1つは上記の書き方です。

canvas.add(new fabric.Rect({
  left: 80, top: 80, width: 120, height: 80, fill: 'orangered'
}));

もう1つはオブジェクト名を指定する書き方です。

var rect = new fabric.Rect({
  left: 80, top: 80, width: 120, height: 80, fill: 'orangered'
});
canvas.add(rect);

結果は同じですが、後者は後に要素を変更したり削除したりする場合に便利です。

//四角を削除
canvas.remove(rect);