デモ

先ずはお試しを。色や太さを変えたりして枠内をなぞってみてください。

このデモではモードを切り替えられるようにしています。要素選択モード（フリードローモードをオフ）にすると、書いた自由線の1筆分が1要素となって通常の図形のように移動／拡縮／回転ができます。

クリア

ソースコード例

上記デモの一部コード例です。

<canvas id="cvs" width="300" height="240"></canvas>

<label><input type="radio" name="mode" value="draw" checked>自由線</label>
<label><input type="radio" name="mode" value="select">要素選択</label>

<lavel>色</label>
<input id="draw-color" type="color" value="#000">

<lavel>太さ</label>
<input id="draw-width" type="range" value="1" min="1" max="10" step="1">

var canvas = new fabric.Canvas('cvs');

//モード切替
$('[name=mode]').click(function(){
  if ($('[name=mode]:checked').val() === 'draw') {
    canvas.isDrawingMode = true;	//自由線
  } else {
    canvas.isDrawingMode = false;	//要素選択
  }
});

//色
$('#draw-color').change(function(){
  canvas.freeDrawingBrush.color = this.value;
});

//太さ
$('#draw-width').change(function(){
  canvas.freeDrawingBrush.width = this.value - 0;
});

行と説明

6,8

isDrawingMode = true で自由線が書け、false で要素選択ができます。書いた自由線やすでにある要素を選択できるようにするには false にします。

14

freeDrawingBrush.colorは色の値で、'#000000'、'#000'、'rgb()'の形式の他に'black'など名称が使用できます。

19

freeDrawingBrush.widthは太さの値でピクセル単位です。-0で数値型に変換しています。文字型を代入すると一見動作するように見えますが、要素選択枠が異常な範囲になる場合があります。