title: Draw multiple Rectangles with svg.draw.js
body: <p>The issue was already posted <a href="https://github.com/svgdotjs/svg.draw.js/issues/32" rel="nofollow noreferrer">here</a>, but I think was never addressed. I need to create a new rect each time I click &quot;Create SVG Rect&quot; button. Hence drawing multiple rectangles.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;&lt;style&gt;#test_slide { width: 500px; height: 500px; cursor: crosshair;border: solid;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;
  &lt;div id=&quot;test_slide&quot;&gt;&lt;/div&gt;
  &lt;button id=&quot;create_svg_rect&quot; &gt;Create SVG Rect&lt;/button&gt;
  
  &lt;!--SCRIPT FILES--&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;  defer=&quot;defer&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://svgjs.dev/svg.draw.js/demo/svg.draw.min.js&quot; type=&quot;text/javascript&quot; defer=&quot;defer&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  document.getElementById(&quot;create_svg_rect&quot;).onclick = function() {
      //SVG.on(document, 'DOMContentLoaded', function() {
          var drawing = new SVG('test_slide').size('100%', '100%');
          var rect = drawing.rect().attr('stroke-width',1).attr('fill','none');
          drawing.on('mousedown', function(e){
              rect.draw(e);
          }, false);
  
          drawing.on('mouseup', function(e){
              rect.draw('stop', e);
              console.log(rect.svg());
              return;
          }, false);
      //});
          
  };
  &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>