開発環境

mac OS X Yosemite
Chrome 48.0.2564.103 (64-bit)
fabric.js v1.5.0

概要

fabric.jsとは何か

canvasを拡張するJavaScriptライブラリです。
日本語の資料があまりないのでここで布教しようかと思います。

公式サイト
 公式サイトが（非公式に？）日本語訳されているサイト※記載されているバージョンが古いので情報は新しくないかもしれません。ご注意を。
github

どんな用途に使えるのか

マウス操作でcanvas内のオブジェクトを操作するなどの時には非常に便利だと思います。
手書きも簡単に実装できます。

公式には得意不得意について説明がされていますのでぜひこちらをご一読ください。

インストール

事前準備

以下URLよりダウンロード
github
※2016年2月16日現在、v.16のrc1が出ていますが、ここでは正式版のv.15を採用しています。

distフォルダ中のfabric.jsまたはfabric.min.jsをフォルダへ配置すれば良いです。
CDNの場合はhttp://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.jsを指定すれば良いです。

html

こちらを元に以下のように作成しました。
github html5-template

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="utf-8">
  <title>fabric.js test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
    canvas {
      border: solid 3px #000;
    }
  </style>

</head>
<body>
  <p>テストキャンバスはこちら</p>
  <canvas id="test_canvas" width="500" height="500"></canvas>


<!-- SCRIPTS -->
<!-- Example: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
</body>
</html>

JavaScript

動作確認だけなのでJavaScriptはこんな感じで書いておきます。

index.html

  <script type="text/javascript">
    //window.onloadを使い、htmlが読み込みされてからスクリプトを動作させる。
    window.onload = function(){
      var canvas = new fabric.Canvas('test_canvas');

      canvas.isDrawingMode = true;
      canvas.freeDrawingBrush.color = '#000000';
      canvas.freeDrawingBrush.width = 5;
    }
  </script>

解説。と気をつけること

canvas layer

fabric.jsにおけるcanvasはnew fabric.Canvas(#id)のように作成します。

この際気をつけるのはnewが動作した際にCanvas#idはCanvas.upper-canvasとCanvas.lower-canvas#idに分けられます。

※重要：説明はこちらを見てください。英語ですがわかりやすいです。
How fabric canvas layering works

おそらくフリーハンドなど操作中のものはupper-canvasに配置され、位置が確定したものはlower-canvasに配置されているものと思われます。

従ってcanvasに対してcss:positionを使って位置を動かしたい場合、自分で作成したCanvas#test_canvasに対してではなく、Div.canvas-containerに対して適用する必要があります。

フリーハンドのパラメータ

isDrawingModeはtrue/falseでフリーハンド描画モードかそうでないかを切り替えられます。
使い方としてはjQueryでon/offするなどが考えられます。

他のパラメータはshadowなどがあります。
canvas.freeDrawingBrush.setShadow("2px 2px 10px rgba(0,0,0,0.2)")と書けば、フリーハンドで描いた線に影がつきます。

今回使用したファイル

github

とりあえずはこんな感じで。
続きはまた書きます。

canvasを便利にするfabric.jsの紹介と導入方法