title: Drawing multiple polygons in js
body: <p>I'm using this code, and it works with charm - It draws a polygon (with canvas) on a given picture, however I'm struggling to modify code, so that it would enable me to draw multiple polygons instead of just one.
  I'm a noob to js and haven't found yet anything that might solve it, I'd appreciate any help/hint in some direction.</p>
  
  <p>Code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="main.css"&gt;
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
      //radius of click around the first point to close the draw
      var END_CLICK_RADIUS = 15;
      //the max number of points of your polygon
      var MAX_POINTS = 8;
  
      var mouseX = 0;
      var mouseY = 0;
      var isStarted = false;
      var points = null;
  
      var canvas = null;
  
  
  
      window.onload = function() {
          background = document.getElementById('justanimage');
  
          //initializing canvas and draw color
          canvas = document.getElementById("canvas");
          ctx = canvas.getContext("2d");
          changeColor("blue");
  
          image = new Image();
          image.onload = function() {
              ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
          };
          image.src = 'justanimage.gif';
  
  
          canvas.addEventListener("click", function(e) {
              var x = e.clientX-canvas.offsetLeft;
              var y = e.clientY-canvas.offsetTop;
              if(isStarted) {
                  //drawing the next line, and closing the polygon if needed
                  if(Math.abs(x - points[0].x) &lt; END_CLICK_RADIUS &amp;&amp; Math.abs(y - points[0].y) &lt; END_CLICK_RADIUS) {
                      isStarted = false;
                  } else {
                      points[points.length] = new Point(x, y);
                      if(points.length &gt;= MAX_POINTS) {
                          isStarted = false;
                      }
                  }
              } else if(points == null) {
                  //opening the polygon
                  points = new Array();
                  points[0] = new Point(x, y);
                  isStarted = true;
              }
          }, false);
  
          //we just save the location of the mouse
          canvas.addEventListener("mousemove", function(e) {
              mouseX = e.clientX - canvas.offsetLeft;
              mouseY = e.clientY - canvas.offsetTop;
          }, false);
  
          //refresh time
          setInterval("draw();", 5);
  
      }
  
      //object representing a point
      function Point(x, y) {
          this.x = x;
          this.y = y;
      }
  
      //resets the application
      function reset() {
          isStarted = false;
          points = null;
          document.getElementById("coordinates").innerHTML = " ";
      }
  
      //displays coordinates of the the point list
      function save() {
          if(points == null) {
              alert("No picture!");
          } else {
              var s = "";
              for(var a in points) {
                  //inversing y axis by (canvas.height - points[a].y)
                  s += "(" + points[a].x + "," + (canvas.height - points[a].y) + ")\n";
              }
              document.getElementById("coordinates").innerHTML = s + '\n';
          }
      }
  
      //draws the current shape
      function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
  
          ctx.beginPath();
  
          if(points != null &amp;&amp; points.length &gt; 0) {
              ctx.moveTo(points[0].x, points[0].y);
  
              for(i = 1 ; i &lt; points.length ; i++) {
                  ctx.lineTo(points[i].x, points[i].y);
              }
  
              if(isStarted) {
                  ctx.lineTo(mouseX, mouseY);
              } else {
                  ctx.lineTo(points[0].x, points[0].y);
              }
          }
          ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
          ctx.stroke();
      }
  
  
  &lt;/script&gt;
  
  
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="outer"&gt;
      &lt;canvas id="canvas" width=300 height=300; &gt;&lt;/canvas&gt;
      &lt;/div&gt;
  
      &lt;p id="coordinates"&gt; &lt;/p&gt;
      &lt;input type="button" value="Save" onclick="save();" /&gt;
      &lt;input type="button" value="Reset" onclick="reset();" /&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>