デモ

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

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

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

canvas.add(rect);

変更 戻す

「変更」ボタンを押すと、座標とサイズと色が変わります。

変更するコード例

要素（オブジェクト）の、座標／サイズ／角度／色を変更する場合はset()を使います。たったこれだけです。

rect.set({
  left: 100,
  top: 100,
  width: 140,
  height: 80,
  angle: 15,
  stroke: 'darkgreen',
  fill: 'limegreen',
  scaleX: 1,	//初期倍率
  scaleY: 1		//初期倍率
}).setCoords();

canvas.renderAll();

setCoords()を忘れないようにしてください。これがないと挙動が異常になります。

また、scaleX/scaleYを設定してください。

サイズ変更する場合の注意

サイズを初期状態に戻す場合の注意点として、scaleX/scaleYを設定しないと、ユーザーがサイズ変更した後の倍率が残ってしまいます。あえてそうする場合はいいですが、初期値に戻す場合はそれぞれに1を設定する必要があります。

scaleX/scaleYを設定しない場合の挙動です。幅や高さを変えてからボタンを押してみてください。

変更 戻す

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