1. 画布初始化

// 创建画布实例
const canvas = new fabric.Canvas('canvasId', {
 width: 800,       // 画布宽度
 height: 600,      // 画布高度
 backgroundColor: '#f5f5f5',  // 背景色
 selection: true,  // 是否启用选择
 preserveObjectStacking: true // 保持对象堆叠顺序
});

2. 基本图形创建

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

//创建矩形
var rect = new fabric.Rect({left:100,top:100,fill:'yellow',width:30,height:30});
// // 使用 set() 方法设置对象的属性，将矩形的 left 属性设置为 300，fill 属性设置为 'green'
// rect.set({
//     left: 300,
//     fill: 'green'
// }); 
// // 你也可以使用 set() 方法同时设置多个属性 
// // 将矩形的 left、top、fill、width 和 height 属性进行设置
// rect.set({
//     left: 400,
//     top: 400,
//     fill: 'yellow',
//     width: 50,
//     height: 50
// });
rect.scale(2, 2);  // 将矩形放大两倍
rect.rotate(45, 'center'); // 将矩形顺时针旋转45度，旋转的中心点是矩形的中心
// rect.translate(50, 50);  // 将矩形向右移动50px，向下移动50px
rect.set({ left: 50, top: 50 }); // 将矩形向右移动50px，向下移动50px
canvas.add(rect);

//创建圆形

var circle = new fabric.Circle({radius:50,fill:'green',left:200,top: 100});
canvas.add(circle);

//创建三角形

var triangle = new fabric.Triangle({width:80,height:100,fill:'blue',left:400,top:300});
canvas.add(triangle);

//创建线段

const line = new fabric.Line([100, 100, 300, 300], {stroke: 'green',strokeWidth: 4,});
canvas.add(line);

//创建文本

const text = new fabric.Text('今晚吃鸡，大吉大利', {left: 200, top: 100, fill: 'black', fontSize: 30,});
canvas.add(text);

//创建图片
fabric.Image.fromURL('https://osstest.jrdaimao.com/ac/1692347493428_300x300.jpg', img => {
   img.set({
       width: 300,
       height: 300,
       left: 100,
       top: 300,
       scaleX: 0.5,
       scaleY: 0.5
   });
   canvas.add(img);
}, {crossOrigin: 'anonymous'});

//创建路径绘制
var path = new fabric.Path('M 0 0 L 280 100 L 178 200 z');
path.set({
   left : 320,
   top : 120,
   fill :'red',
});
canvas.add(path);

// 设置属性后重新更新视图
canvas.renderAll();                 
 

以上就是Fabric的基本绘制功能，代码亲测有效，希望对你有所帮助。