Fabric.js Sticky Note Board — Draggable Canvas Notes Snippet

<div class="fsb-stage">
  <div class="fsb-head">
    <span class="fsb-tag">Fabric.js · canvas objects</span>
    <h2>Sticky Note Board</h2>
    <p>Add a note, drag it anywhere, resize it by its corner handles, double-click the text to edit.</p>
  </div>
  <div class="fsb-toolbar">
    <button class="fsb-btn" id="fsbAdd">+ Add note</button>
    <button class="fsb-btn fsb-btn-ghost" id="fsbClear">Clear board</button>
  </div>
  <div class="fsb-board">
    <canvas id="fsbCanvas"></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}
.fsb-stage{width:min(700px,94vw);display:flex;flex-direction:column;align-items:center;gap:16px}
.fsb-head{text-align:center}
.fsb-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#818cf8;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.3);padding:5px 12px;border-radius:99px;margin-bottom:12px}
.fsb-head h2{font-size:clamp(24px,5vw,34px);font-weight:800;letter-spacing:-.02em}
.fsb-head p{font-size:13.5px;color:#8e97b8;margin-top:7px}

.fsb-toolbar{display:flex;gap:10px}
.fsb-btn{padding:9px 18px;border-radius:99px;border:1px solid rgba(129,140,248,.5);background:#818cf8;color:#0b0f22;font:700 12.5px system-ui;cursor:pointer;transition:transform .15s,background .18s}
.fsb-btn:hover{transform:translateY(-1px);background:#93a0fb}
.fsb-btn-ghost{background:rgba(255,255,255,.04);color:#c3cbe8;border-color:rgba(255,255,255,.14)}
.fsb-btn-ghost:hover{background:rgba(255,255,255,.09);color:#fff}

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

var PASTELS = ['#fff2a8', '#ffd3e0', '#c6f2d6', '#c9e4ff', '#ffe0c2', '#e7d4ff'];
var canvas = new fabric.Canvas('fsbCanvas', {
  width: 660,
  height: 440,
  backgroundColor: '#f4f1e8',
  selection: true
});

var noteCount = 0;

function randomPastel() {
  return PASTELS[Math.floor(Math.random() * PASTELS.length)];
}

function addNote() {
  noteCount++;
  var offset = (noteCount % 6) * 14;
  var left = 70 + offset;
  var top = 60 + offset;
  var color = randomPastel();

  // The rect and the text are two separate Fabric objects grouped into
  // one — grouping is what lets a single drag/resize gesture move both
  // together while the text stays independently editable via double-click.
  var rect = new fabric.Rect({
    left: 0,
    top: 0,
    width: 160,
    height: 140,
    rx: 4,
    ry: 4,
    fill: color,
    shadow: { color: 'rgba(0,0,0,0.25)', blur: 10, offsetX: 0, offsetY: 6 }
  });

  var text = new fabric.IText('New note', {
    left: 12,
    top: 12,
    width: 136,
    fontSize: 16,
    fontFamily: 'system-ui, sans-serif',
    fill: '#2b2a24',
    editable: true
  });

  var group = new fabric.Group([rect, text], {
    left: left,
    top: top,
    subTargetCheck: true,
    hasControls: true,
    lockRotation: false
  });

  // Double-clicking the group enters editing on the text sub-object
  // directly, so the user never has to ungroup manually.
  group.on('mousedblclick', function (opt) {
    var target = opt.subTargets && opt.subTargets[0];
    if (target && target.type === 'i-text') {
      canvas.setActiveObject(target);
      canvas.remove(group);
      canvas.add(target);
      target.set({ left: group.left + 12, top: group.top + 12 });
      target.enterEditing();
      target.selectAll();
      canvas.requestRenderAll();

      target.on('editing:exited', function () {
        canvas.remove(target);
        var newRect = new fabric.Rect({ left: 0, top: 0, width: 160, height: 140, rx: 4, ry: 4, fill: color, shadow: rect.shadow });
        var newText = new fabric.IText(target.text || 'New note', { left: 12, top: 12, width: 136, fontSize: 16, fontFamily: 'system-ui, sans-serif', fill: '#2b2a24' });
        var newGroup = new fabric.Group([newRect, newText], { left: target.left - 12, top: target.top - 12, subTargetCheck: true });
        wireDoubleClick(newGroup, color);
        canvas.add(newGroup);
        canvas.requestRenderAll();
      });
    }
  });

  canvas.add(group);
  canvas.setActiveObject(group);
  canvas.requestRenderAll();
}

function wireDoubleClick(group, color) {
  group.off('mousedblclick');
  group.on('mousedblclick', function (opt) {
    var target = opt.subTargets && opt.subTargets[0];
    if (target && target.type === 'i-text') {
      canvas.setActiveObject(target);
      canvas.remove(group);
      canvas.add(target);
      target.set({ left: group.left + 12, top: group.top + 12 });
      target.enterEditing();
      target.selectAll();
      canvas.requestRenderAll();
      target.on('editing:exited', function () {
        canvas.remove(target);
        var newRect = new fabric.Rect({ left: 0, top: 0, width: 160, height: 140, rx: 4, ry: 4, fill: color, shadow: { color: 'rgba(0,0,0,0.25)', blur: 10, offsetX: 0, offsetY: 6 } });
        var newText = new fabric.IText(target.text || 'New note', { left: 12, top: 12, width: 136, fontSize: 16, fontFamily: 'system-ui, sans-serif', fill: '#2b2a24' });
        var newGroup = new fabric.Group([newRect, newText], { left: target.left - 12, top: target.top - 12, subTargetCheck: true });
        wireDoubleClick(newGroup, color);
        canvas.add(newGroup);
        canvas.requestRenderAll();
      });
    }
  });
}

document.getElementById('fsbAdd').addEventListener('click', addNote);
document.getElementById('fsbClear').addEventListener('click', function () {
  canvas.clear();
  canvas.backgroundColor = '#f4f1e8';
  canvas.requestRenderAll();
});

addNote();
addNote();