index.html

<!doctype HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Annotate</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id='drop-layer' style='display: none;'>
      <div id='drop-overlay'>
        <div id='drop-target'>
          Drop an image here!
        </div>
      </div>
    </div>

    <div contenteditable></div>

    <h2 id="paste-image-text">Paste an image!</h2>

    <div id="render-container">
      <div id="image-output"></div>
    </div>

    <div class="controls">
      <button id="undo-button">Undo</button>
      <button id="render-button">Render</button>
    </div>

    <br>

    <div class="annotation-object-buttons-container controls">
      <div class="annotation-object-button active" id="arrow-button">Arrow</div>
      <div class="annotation-object-button" id="box-button">Box</div>
      <div class="annotation-object-button" id="circle-button">Circle</div>
      <div class="annotation-object-button" id="text-button">Text</div>
    </div>

    <div id="canvas-container" class="controls">
      <canvas id="image-canvas" height="300" width="300"></canvas>
    </div>

    <script type="text/javascript" src="mousetrap.min.js"></script>
    <script type="text/javascript" src="annotate.js"></script>
  </body>
</html>