Fabric.js 自由绘制矩形（逐一分析4种操作方向带来的影响）

new fabric.Rect({
    top: 0, // 矩形左上角在y轴的位置
    left: 0, // 矩形左上角在x轴的位置
    width: 100, // 矩形的宽
    height: 100, // 矩形的高
    fill: 'transparent', // 填充色
    stroke: '#000' // 边框颜色
})

new fabric.Rect({
    top: Math.min(downPoint.y, upPoint.y),
    left: Math.min(downPoint.x, upPoint.x),
    width: Math.abs(downPoint.x - upPoint.x),
    height: Math.abs(downPoint.y - upPoint.y),
    fill: 'transparent',
    stroke: '#000'
})

<!-- 工具栏 -->
<div class="toolbar">
  <select onchange="typeChange(this.options[this.options.selectedIndex].value)">
    <option value="default">默认（框选）</option>
    <option value="rect">矩形</option>
  </select>
</div>

<!-- 画布 -->
<canvas id="canvas" width="800" height="800"></canvas>

<!-- 引入fabric.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script>

<script>
let canvas = null // 画布对象

let currentType = 'default' // 当前操作模式（默认 || 创建矩形）

let downPoint = null // 按下鼠标时的坐标
let upPoint = null // 松开鼠标时的坐标

// 初始化画板
function initCanvas() {
  canvas = new fabric.Canvas('canvas')

  canvas.on('mouse:down', canvasMouseDown)   // 鼠标在画布上按下
  canvas.on('mouse:up', canvasMouseUp)       // 鼠标在画布上松开
}

// 画布操作类型切换
function typeChange(opt) {
  currentType = opt
  switch(opt) {
    case 'default': // 默认框选模式
      canvas.selection = true // 允许框选
      canvas.selectionColor = 'rgba(100, 100, 255, 0.3)' // 选框填充色：半透明的蓝色
      canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 选框边框颜色：半透明灰色
      canvas.skipTargetFind = false // 允许选中
      break
    case 'rect': // 创建矩形模式
      canvas.selectionColor = 'transparent' // 选框填充色：透明
      canvas.selectionBorderColor = 'rgba(0, 0, 0, 0.2)' // 选框边框颜色：透明度很低的黑色（看上去是灰色）
      canvas.skipTargetFind = true // 禁止选中
      break
  }
}

// 鼠标在画布上按下
function canvasMouseDown(e) {
  // 鼠标左键按下时，将当前坐标 赋值给 downPoint。{x: xxx, y: xxx} 的格式
  downPoint = e.absolutePointer
}

// 鼠标在画布上松开
function canvasMouseUp(e) {
  // 绘制矩形的模式下，才执行下面的代码
  if (currentType === 'rect') {
    // 松开鼠标左键时，将当前坐标 赋值给 upPoint
    upPoint = e.absolutePointer
    // 调用 创建矩形 的方法
    createRect()
  }
}

// 创建矩形
function createRect() {
  // 如果点击和松开鼠标，都是在同一个坐标点，不会生成矩形
  if (JSON.stringify(downPoint) === JSON.stringify(upPoint)) {
    return
  }

  // 创建矩形
  // 矩形参数计算（前面总结的4条公式）
  let top = Math.min(downPoint.y, upPoint.y)
  let left = Math.min(downPoint.x, upPoint.x)
  let width = Math.abs(downPoint.x - upPoint.x)
  let height = Math.abs(downPoint.y - upPoint.y)

  // 矩形对象
  const rect = new fabric.Rect({
    top,
    left,
    width,
    height,
    fill: 'transparent', // 填充色：透明
    stroke: '#000' // 边框颜色：黑色
  })

  // 将矩形添加到画布上
  canvas.add(rect)

  // 创建完矩形，清空 downPoint 和 upPoint。当然，你也可以不做这步。
  downPoint = null
  upPoint = null
}

// 页面加载的生命周期，在此执行 初始化画布 的操作
window.onload = function() {
  initCanvas()
}
</script>