Added rect shape

README.md

@@ -16,4 +16,12 @@ e  EXPORT(Not working atm, just copy the DOM element)
 aA CLOCKWISE
 sS COUNTERWISE
 d  LINE
+```
+
+## Shapes
+
+```
+z  DOT
+x  CIRCLE
+c  RECT
 ```

scripts/dotgrid.js

@@ -160,6 +160,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.draw_circle = function()
   {
+    if(from === null || to === null){ return; }
+
     var s = document.createElementNS("http://www.w3.org/2000/svg", "circle");
     s.setAttribute("cx",-from[0]);
     s.setAttribute("cy",from[1]);
@@ -169,6 +171,20 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     reset();
   }
 
+  this.draw_rect = function()
+  {
+    if(from === null || to === null){ return; }
+
+    var s = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    s.setAttribute("x",-from[0]);
+    s.setAttribute("y",from[1]);
+    s.setAttribute("width",Math.abs(to[0]) - Math.abs(from[0]));
+    s.setAttribute("height",Math.abs(to[1]) - Math.abs(from[1]));
+    vector_element.appendChild(s);
+
+    reset();
+  }
+
   this.reset = function()
   {
     reset();
@@ -193,9 +209,9 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
   this.export = function()
   {
-    var w = window.open('about:blank','image from canvas');
+    var w = window.open('about:blank');
     w.document.write("<title>Export</title>");
-    w.document.appendChild(vector_element);
+    w.document.body.innerText += vector_element.outerHTML;
   }
 
   // Normalizers

scripts/keyboard.js

@@ -10,10 +10,11 @@ function Keyboard()
 
       case 81 : dotgrid.reset(); break;
       case 87 : dotgrid.erase(); break;
-      case 80 : dotgrid.export(); break;
+      case 69 : dotgrid.export(); break;
 
       case 90 : dotgrid.draw_dot(); break;
       case 88 : dotgrid.draw_circle(); break;
+      case 67 : dotgrid.draw_rect(); break;
     }
   }
 }