Examples

Interactive examples demonstrating common usage patterns. Each demo runs live — try hovering over images and creating annotations.

Basic Annotations

The simplest usage — initialize with static annotation data. Hover over the image to see notes, click editable ones to modify.

Starry Night
JavaScript 
var img = document.getElementById('my-image');

AnnotateImage.annotate(img, {
  editable: true,
  notes: [
    { top: 80, left: 30, width: 100, height: 350,
      text: "Cypress tree", id: "note-1", editable: true },
    { top: 20, left: 200, width: 500, height: 200,
      text: "Swirling sky", id: "note-2", editable: false },
    { top: 500, left: 150, width: 550, height: 200,
      text: "Village below", id: "note-3", editable: true },
    { top: 30, left: 750, width: 120, height: 120,
      text: "Crescent moon", id: "note-4", editable: false }
  ]
});

Multiple Instances

Multiple annotated images on one page, each with independent configuration. Instances don't interfere with each other.

Editable with Notes
Starry Night
Read-Only
Mona Lisa
Empty (Add from Scratch)
The Great Wave
JavaScript 
// Editable with notes
AnnotateImage.annotate(document.getElementById('multi-editable'), {
  editable: true,
  notes: [
    { top: 80, left: 30, width: 100, height: 350, text: "Cypress tree", id: "me-1", editable: true },
    { top: 20, left: 200, width: 500, height: 200, text: "Swirling sky", id: "me-2", editable: false }
  ]
});

// Read-only
AnnotateImage.annotate(document.getElementById('multi-readonly'), {
  editable: false,
  notes: [
    { top: 490, left: 350, width: 230, height: 80, text: "The enigmatic smile", id: "mr-1", editable: false },
    { top: 700, left: 280, width: 350, height: 180, text: "Folded hands", id: "mr-2", editable: false }
  ]
});

// Empty — add from scratch
AnnotateImage.annotate(document.getElementById('multi-empty'), {
  editable: true,
  notes: []
});

Programmatic API

Control the annotation layer programmatically using instance methods. Click the buttons below to interact with the plugin.

The Great Wave
Status


      
Notes JSON

      


      

  JavaScript
  


      
var instance = AnnotateImage.annotate(img, {
  editable: true,
  notes: initialNotes,
  onError: function(ctx) { console.error(ctx.type, ctx.error); }
});

// Enter add-note mode
instance.add();

// Remove all annotations
instance.clear();

// Export current state
var notes = instance.getNotes();

// Tear down completely
instance.destroy();

// Re-initialize after destroy
instance = AnnotateImage.annotate(img, { editable: true, notes: initialNotes });