要素の配置とデモ

先ずは下記初期値で図形を配置します。

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

var rect = new fabric.Rect({
  left: 110,		//左
  top: 70,			//上
  width: 120,		//幅
  height: 80,		//高さ
  angle: 20,		//角度
  strokeWidth: 5,	//線の幅
  stroke: 'blue',	//線の色
  fill: 'royalblue'	//塗潰し色
});

canvas.add(rect);

図形を、移動／拡縮／回転させてみてください。その都度変更された各値を表示させています。

初期値に戻す

拡縮させるときにつまむハンドルによっては left/top の座標が変わることがあります。左上の座標を基準にしているためです。回転の場合は常に変わります。

取得方法とコード例

要素（オブジェクト）の、座標／サイズ／角度／線の太さ／色は下記で取得できます。Math.round() はJavaScriptの持つ、四捨五入するオブジェクトです。

left = Math.round(rect.left);
top = Math.round(rect.top);
width = Math.round(rect.width * rect.scaleX);
height = Math.round(rect.width * rect.scaleX);
angle = Math.round(rect.angle);
strokeWidth = rect.strokeWidth;
stroke = rect.stroke;
fill = rect.fill;

注意点として、width/heightは常に初期値が取得され、ユーザーがサイズ変更した後の値を取得できません。倍率のscaleXやscaleYをそれぞれに掛ける必要があります。

取得して表示する実際のコード例です。

//値取得と表示
function getProperty(){
  $('textarea').text(
    'left = ' + Math.round(rect.left) + '\n' +
    'top = ' + Math.round(rect.top) + '\n' +
    'width = ' + Math.round(rect.width * rect.scaleX) + '\n' +
    'height = ' + Math.round(rect.width * rect.scaleX) + '\n' +
    'angle = ' + Math.round(rect.angle) + '\n' +
    'strokeWidth = ' + rect.strokeWidth + '\n' +
    'stroke = ' + rect.stroke + '\n' +
    'fill = ' + rect.fill
  );
}

//変更されたときのイベント処理
canvas.on('object:modified', function(){
  getProperty();
});

上記で挙げた以外にも数多くのプロパティがあります。機会があれば別の記事で書きたいと思います。