JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/30390990/anno/annotorious/annotorious.debug.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/30390990/anno/annotorious/css/annotorious.css">
<script src="https://dl.dropboxusercontent.com/u/30390990/anno/openseadragon-bin-2.1.0/openseadragon.min.js"></script>
<div id="openseadragon-1" style="width: 600px; height: 400px;"></div>
<!--
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8c/JPEG_example_JPG_RIP_025.jpg" id="myImage1" />
<img src="http://img1.gamedog.cn/2013/06/03/43-1306031343350.jpg" id="myImage2" />
-->
<button onclick="anno.activateSelector();" href="#">
  ADD ANNOTATION
</button>

JavaScript

var savedStr1 = '{"src":"https://upload.wikimedia.org/wikipedia/commons/8/8c/JPEG_example_JPG_RIP_025.jpg","text":"JPG","shapes":[{"type":"rect","geometry":{"x":0.25878594249201275,"y":0.3504273504273504,"width":0.3706070287539936,"height":0.1623931623931624},"style":{}}],"context":"https://fiddle.jshell.net/_display/"}';
var savedStr2 = '{"src":"http://img1.gamedog.cn/2013/06/03/43-1306031343350.jpg","text":"flower","shapes":[{"type":"rect","geometry":{"x":0.278125,"y":0.18125,"width":0.434375,"height":0.08958333333333333},"style":{}}],"context":"https://fiddle.jshell.net/_display/"}';

var response = {"annots":[
  {
    "src":"https://upload.wikimedia.org/wikipedia/commons/8/8c/JPEG_example_JPG_RIP_025.jpg",
    "comment":"JPG",
    "rect_x":0.25878594249201275,
    "rect_y":0.3504273504273504,
    "rect_w":0.3706070287539936,
    "rect_h":0.1623931623931624,
  },
  {
    "src":"http://img1.gamedog.cn/2013/06/03/43-1306031343350.jpg",
    "comment":"JPG",
    "rect_x":0.278125,
    "rect_y":0.18125,
    "rect_w":0.434375,
    "rect_h":0.08958333333333333,
  }
]};

function init() {
    var viewer = OpenSeadragon({
        id: "openseadragon-1",
        prefixUrl: "https://neswork.com/javascript/openseadragon-bin-2.1.0/images/",
        //tileSources: "https://openseadragon.github.io/example-images/highsmith/highsmith.dzi",
        tileSources: { type: 'legacy-image-pyramid', levels: [{ url: 'https://annotorious.github.io/demos/2003rosen1799/0001q.jpg', height: 889, width:  600 }, { url: 'https://annotorious.github.io/demos/2003rosen1799/0001r.jpg', height: 2201, width: 1485 }, { url: 'https://annotorious.github.io/demos/2003rosen1799/0001v.jpg', height: 4402, width: 2970 }]},
        showNavigator: true,
    });
    //anno.makeAnnotatable(document.getElementById('myImage1'));
    //anno.makeAnnotatable(document.getElementById('myImage2'));
    anno.makeAnnotatable(viewer);
    anno.activateSelector();
    /*for (var i=0;i<response.annots.length;i++) {
         ...