getActiveObjectによる取得

先ず複数形「s」のつかない getActiveObject() で取得する例です。

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

$('#btn').click(function(){
  var obj = canvas.getActiveObject();

  $('textarea').val('').val(
    'ret = ' + obj + '\n' +
    'type = ' + obj.type + '\n' +
    'fill = ' + obj.get('fill') + '\n' + '\n' +
    'length = ' + obj.length
  );

  console.log(obj);
});

ブラウザの開発ツール（多くはF12で表示）のコンソールも表示させ、選択する数を0～複数で試してみてください。

選択要素を取得して属性を表示

すると以下の通りになります。

選択なしの場合

返り値はundefined。それに対して type で取得しようとしていることでコンソールはエラー表示して（あえてさせて）います。

単数選択の場合

返り値は選択されたobject。

複数選択の場合

返り値はobject、ただし下記参照。type の返りは activeSelection。rgb(0,0,0)は色が設定されていないことを示しています。

選択された数を期待しての、length は取得できませんでした。

複数選択の返り値で、obj._objects[0]とすれば要素を取得することはできました。

console.log(obj);				//object
console.log(obj[0]);			//undefined
console.log(obj._objects);		//Array
console.log(obj._objects[0]);	//object
console.log(obj.length);		//undefined
console.log(obj._objects.length);
	//選択なし及び単数選択はエラー、複数は数値

getActiveObjectsによる取得

次に複数形「s」のつくgetActiveObjects()の例です。返り値は配列なのでループさせます。

選択数＝配列数は length で取得できます。選択なしでも0が返ります。

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

$('#btn').click(function(){
  var obj = canvas.getActiveObjects(),
      len = obj.length,
      str = '';

  $('textarea').val('');

  for (var i = 0; i < len; i++) {
    str += 'ret = ' + obj[i] + '\n' +
           'type = ' + obj[i].type + '\n'
           'fill = ' + obj[i].get('fill') + '\n' + '\n';
  }

  str += ('length = ' + len);
  $('textarea').val(str);

  console.log(obj);
});

要素を取得して属性を表示

すると以下の通りになります。

選択なしの場合

返り値はArray。

単数選択の場合

返り値はArray。

複数選択の場合

返り値はArray。

console.log(obj);		 //Array
console.log(obj[0]);	 //無選択undefined、単数複数object
console.log(obj.length); //0～

getActiveObjectとgetActiveObjectsの違い

おおまか、getActiveObject は単数選択、getActiveObjects は複数選択が前提となるでしょう。結局「s」の有無そのままですが。

実際の使用方法の例です。

単数選択

getActiveObject()を実際使用する場合、先ずエラー対策をすることになるでしょう。または返り値によって分岐することになるでしょう。

//選択なしは離脱
if (!canvas.getActiveObject()) {
  return;
}

//複数選択は離脱
if (canvas.getActiveObject().type !== 'activeSelection') {
  return;
}

//単数選択の処理
var obj = canvas.getActiveObject();

console.log(obj);

ちなみにこれは公式サイトで標準的な使い方です。

複数選択

getActiveObjects は length による分岐かループ処理、または両方が必要でしょう。

var obj = canvas.getActiveObjects();

for (var i = 0; i < obj.length; i++) {
　　console.log(obj[i]);
}