Fabric.js Shape Annotation Tool — Image Markup Canvas Snippet

<div class="fat-stage">
  <div class="fat-head">
    <span class="fat-tag">Fabric.js · image annotation</span>
    <h2>Shape Annotation Tool</h2>
    <p>Add a rectangle or an arrow on top of the image, then drag, resize, or delete it.</p>
  </div>
  <div class="fat-toolbar">
    <button class="fat-btn" id="fatRect">+ Rectangle</button>
    <button class="fat-btn" id="fatArrow">+ Arrow</button>
    <button class="fat-btn fat-btn-danger" id="fatDelete">Delete selected</button>
  </div>
  <div class="fat-board">
    <canvas id="fatCanvas"></canvas>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 100% at 50% 0%,#161d38,#080a14);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.fat-stage{width:min(680px,94vw);display:flex;flex-direction:column;align-items:center;gap:16px}
.fat-head{text-align:center}
.fat-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f472b6;background:rgba(244,114,182,.12);border:1px solid rgba(244,114,182,.3);padding:5px 12px;border-radius:99px;margin-bottom:12px}
.fat-head h2{font-size:clamp(24px,5vw,34px);font-weight:800;letter-spacing:-.02em}
.fat-head p{font-size:13.5px;color:#8e97b8;margin-top:7px}

.fat-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fat-btn{padding:9px 18px;border-radius:99px;border:1px solid rgba(244,114,182,.5);background:#f472b6;color:#1a0b14;font:700 12.5px system-ui;cursor:pointer;transition:transform .15s,background .18s}
.fat-btn:hover{transform:translateY(-1px);background:#f890c5}
.fat-btn-danger{background:rgba(255,255,255,.04);color:#f3a4a4;border-color:rgba(248,113,113,.4)}
.fat-btn-danger:hover{background:rgba(248,113,113,.12);color:#fecaca}

.fat-board{width:100%;border-radius:18px;overflow:hidden;background:#0c1024;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px -24px rgba(0,0,0,.8)}

var canvas = new fabric.Canvas('fatCanvas', { width: 640, height: 400 });

// Load the base image as the canvas backgroundImage rather than an object,
// so it can never be accidentally selected, dragged, or deleted along
// with the annotations drawn on top of it.
fabric.Image.fromURL(
  'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1000&q=80',
  function (img) {
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    img.scale(scale);
    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
      left: (canvas.width - img.width * scale) / 2,
      top: (canvas.height - img.height * scale) / 2
    });
  },
  { crossOrigin: 'anonymous' }
);

var annotationCount = 0;

function nextOffset() {
  annotationCount++;
  return (annotationCount % 6) * 16;
}

function addRectangle() {
  var offset = nextOffset();
  var rect = new fabric.Rect({
    left: 60 + offset,
    top: 60 + offset,
    width: 140,
    height: 90,
    fill: 'rgba(244,114,182,0.15)',
    stroke: '#f472b6',
    strokeWidth: 2,
    rx: 3,
    ry: 3,
    cornerColor: '#f472b6',
    transparentCorners: false
  });
  canvas.add(rect);
  canvas.setActiveObject(rect);
  canvas.requestRenderAll();
}

function addArrow() {
  var offset = nextOffset();
  var x1 = 80 + offset, y1 = 250, x2 = 260 + offset, y2 = 200;

  // A line for the shaft plus a small rotated triangle for the arrowhead,
  // combined into one fabric.Group so the pair moves, rotates, and
  // resizes together as a single "arrow" annotation.
  var line = new fabric.Line([x1, y1, x2, y2], {
    stroke: '#f472b6',
    strokeWidth: 3,
    selectable: false,
    evented: false
  });

  var angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 90;
  var head = new fabric.Triangle({
    left: x2,
    top: y2,
    originX: 'center',
    originY: 'center',
    angle: angle,
    width: 16,
    height: 18,
    fill: '#f472b6',
    selectable: false,
    evented: false
  });

  var group = new fabric.Group([line, head], {
    cornerColor: '#f472b6',
    transparentCorners: false
  });
  canvas.add(group);
  canvas.setActiveObject(group);
  canvas.requestRenderAll();
}

document.getElementById('fatRect').addEventListener('click', addRectangle);
document.getElementById('fatArrow').addEventListener('click', addArrow);

document.getElementById('fatDelete').addEventListener('click', function () {
  var active = canvas.getActiveObject();
  if (!active) return;
  canvas.remove(active);
  canvas.discardActiveObject();
  canvas.requestRenderAll();
});

document.addEventListener('keydown', function (e) {
  if ((e.key === 'Delete' || e.key === 'Backspace') && canvas.getActiveObject() && document.activeElement.tagName !== 'INPUT') {
    canvas.remove(canvas.getActiveObject());
    canvas.discardActiveObject();
    canvas.requestRenderAll();
  }
});