Web制作実験Fabric.js標準の基本図形7種
公開：
Fabric.jsでは7種類の基本図形を標準で装備していますが、そのオブジェクト名と主な属性の与え方です。
基本図形7種
直線、 四角、 三角、 円、 楕円、 連続線、 多角形、 の7種です。
直線（fabric.Line）
canvas.add(new fabric.Line(
[40, 70, 160, 120],{ //始点x,y,終点x,y
strokeWidth: 3, //太さ
stroke: 'blue', //色
angle: 0 //角度
}));
四角（fabric.Rect）
canvas.add(new fabric.Rect({
left: 60, //左上角の左
top: 60, //左上角の上
width: 80, //幅
height: 60, //高さ
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue',//塗潰しの色
angle: 0 //角度
}));
三角（fabric.Triangle）
canvas.add(new fabric.Triangle({
left: 60, //左上角相当部分（赤点）の左
top: 60, //左上角相当部分（赤点）の上
width: 80, //幅
height: 60, //高さ
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue',//塗潰しの色
angle: 0 //角度
}));
円（fabric.Circle）
canvas.add(new fabric.Circle({
left: 70, //左上角相当部分（赤点）の左
top: 70, //左上角相当部分（赤点）の上
radius: 30, //半径
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue',//塗潰しの色
angle: 0 //角度
}));
楕円（fabric.Ellipse）
canvas.add(new fabric.Ellipse({
left: 50, //左上角相当部分（赤点）の左
top: 70, //左上角相当部分（赤点）の上
rx: 50, //水平半径
ry: 30, //垂直半径
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue',//塗潰しの色
angle: 0 //角度
}));
連続線（fabric.Polyline：終点閉じない）
canvas.add(new fabric.Polyline([
{x: 40, y: 60}, //始点
{x: 160, y: 120}, //中間点1
{x: 60, y: 110}, //中間点2
{x: 140, y: 80}],{ //終点
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue', //塗潰しの色
angle: 0 //角度
}));
連続線といっても1つの要素になります。始点～終点の座標は配列（[]）なので注意です。
多角形（fabric.Polygon：終点閉じる）
canvas.add(new fabric.Polygon([
{x: 40, y: 60}, //始点＝終点
{x: 160, y: 120}, //中間点1
{x: 60, y: 110}, //中間点2
{x: 140, y: 80}],{ //中間点3
strokeWidth: 3, //線の太さ
stroke: 'blue', //線の色
fill: 'lightblue', //塗潰しの色
angle: 0 //角度
}));
各座標は前述「連続線（fabric.Polyline：終点閉じない）」と同じで、終点は自動的に閉じられます。これも1つの要素になります。