title: Building an web based image annotation tool - saving annotations to localStorage
body: <p>I am building a web application for annotating images.  The work flow is as follows:</p>
  
  <ol>
  <li>Select a project -  using  : action = list all sub-projects</li>
  <li>Click on a sub-project : action = fetch all the images within-sub project</li>
  <li>Display the images as a horizontal scrollable thumbnail gallery</li>
  <li>Onclick image thumbnail from the gallery, display the larger image for annotation.</li>
  </ol>
  
  <p>I am using canvas to display larger image.   I have used another canvas as a layer to the first one, and I am able to draw rectangles using mouse over regions of interest.  I am saving it locally.  However, when I move on to the next image, the rectangle also gets carried to the next image.  </p>
  
  <p>My question is, instead of using just one layer, do I have to dynamically create as many canvas layers as I have in the annotation dataset.  I am not sure because in each sub project I have around 8000-9000 images.  Though I wont be annotating on all of them, still creating as many canvases as layers doesn't really sound good for me.</p>
  
  <p>The following is the code:</p>
  
  <p>HTML Canvas</p>
  
  <pre><code>&lt;div class="body"&gt;  &lt;!-- Canvas to display images begins --&gt;
          &lt;canvas id="iriscanvas" width=700px height=700px style="position:absolute;margin:50px 0 0 0;z-index:1"&gt;&lt;/canvas&gt;
          &lt;canvas id="regncanvas" onclick="draw(this, event)" width=700px height=700px style="position:absolute;margin:50px 0 0 0;z-index:2"&gt;&lt;/canvas&gt;
        &lt;/div&gt; &lt;!-- Canvas to display images ends --&gt;
  </code></pre>
  
  <p>Step 4 given above:  OnClick display thumbnail</p>
  
  <pre><code>function clickedImage(clicked_id) {
    var clickedImg = document.getElementById(clicked_id).src;
    var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');
    localStorage.setItem("clickedImg", clickedImg);
    var canvas = document.getElementById("iriscanvas");
    var ctx = canvas.getContext("2d");
    var thumbNails = document.getElementById("loaded_img_panel");
    var pic = new Image();
    pic.onload = function() {
      ctx.drawImage(pic, 0,0)
    }
  
    thumbNails.addEventListener('click', function(event) {
      pic.src = event.target.src;
    });
  
    }
  </code></pre>
  
  <p>Draw rectangles on second layer of canvas</p>
  
  <pre><code>window.onload=function(){
      c=document.getElementById("regncanvas");
      if (c) initCanvas(c);
  };
  
  function initCanvas(canvas){
      // Load last canvas
      loadLastCanvas(canvas);
  }
  
  function draw(canvas, event){
      // Draw at random place
      ctx=c.getContext("2d");
      ctx.fillStyle="#ff0000";
      ctx.beginPath();
      ctx.fillRect (250*Math.random()+1, 220*Math.random()+1, 40, 30);
      ctx.closePath();
      ctx.fill();
      // Save canvas
      saveCanvas(canvas);
  }
  
  function saveCanvas(c){
      localStorage['lastImgURI']=c.toDataURL("image/png");
  }
  
  function loadLastCanvas(c){
      if (!localStorage['lastImgURI']) return;
      img = new Image();
      img.onload = function() {
         ctx=c.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
      };
      img.src= localStorage['lastImgURI'];
  }
  </code></pre>
  
  <p>Can someone guide me please?</p>
  
  <p>The following is a screen grab of my application:</p>
  
  <p><a href="https://i.stack.imgur.com/Z8BMI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z8BMI.png" alt="enter image description here"></a></p>